文章目录
Vue基础相关内容
1.0 Vue的模板相关语法
1 插值
Vue 中通过插值语法来显示数据
插值语法是在html标签中, 使用
{{表达式}}
的方式显示数据. 如:<p>{{message}}</p> // {{}} 两对大括号的形式, 是Vue中的插值.
2. 强制数据绑定
v-bind 指令, 是一个标签的属性, 在Vue中叫指令, 是用来强制绑定数据的.(只要是在html 标签属性上的值想要成为动态的值, 就需要使用 v-bind 指令强制数据绑定.) 如下:
<a v-bind:href="url">访问百度</a> # 简写如下: // 可以只写冒号的形式简写. <a :href="url">访问百度</a>
3. 事件监听
v-on
指令是事件指令, 是用来绑定事件的时候使用的指令.# 给button 绑定一个事件 <button v-on:click="showMessage">按钮1</button> # 简写形式可以通过 @ 符号简写事件监听的指令 <button @click="showMessage2">按钮1</button>
4. 计算属性
计算属性 : 当某个属性的值改变, 和其相关联的属性的值也会自动的发生改变
🏴 : 计算属性写法一
计算属性的 方法形式的写法
// 计算属性 computed: { // 属性名字(方法) -- 在内部操作相关联的属性的值就会发生变化 fullName1() { // 被计算出来的属性值. return this.firstName + "-" + this.lastName; }, },
🏴 : 计算属性写法二
计算属性的 对象形式的写法
fullName3: { get() { return this.firstName + "-" + this.lastName; }, set(val) { // val 就是 fullName3 的值 const name = val.split('-') this.firstName = name[0] this.lastName = name[1] }, },
5. 监视
监视通常是监视已有数据的改变
// 监视 已有属性的改变 watch: { firstName(val) { // val 就是 firstName 属性的值 this.fullName2 = val + '-' + this.lastName }, },
6. Vue中class样式的操作
Vue中class类样式的操作绑定. 如下:
<head> <title>title</title> <script type="text/javascript" src="../js/vue.js"></script> <style type="text/css"> #app { width: 600px; border: 1px solid red; margin: 0 auto; } .cls { color: green; } .cls1 { color: deeppink; } .cls2 { font-size: 30px; } .cls3 { font-family: "全新硬笔行书简"; } </style> </head> <body> <div id="app"> #// 直接设置class 的值 <fieldset> <legend>class绑定:直接设置class值</legend> <p :class="myClass">这是一个P</p> <button @click="changeClass1">改变样式</button> </fieldset> #// 使用对象的方式设置class样式, 对象的属性是类名, 属性的值是 布尔值, 表示是否应用这个样式 <fieldset> <legend> class绑定:使用对象的方式(cls是类名,固定的写法(写的肯定是类名,后面跟的是布尔值)) </legend> <p :class="{cls:isCls, cls2:isCls2}">不乱于心,不困于情</p> <button @click="changeClass2">改变样式</button> </fieldset> #// 使用数组的方式给class绑定类样式, 类样式需要在 data 中定义 <fieldset> <legend> class绑定:使用数组方式([]里面是动态的属性,需要在data中定义) </legend> <p :class="[class1,class2,class3]">不念过去,不畏将来</p> <button @click="changeClass3">改变样式</button> </fieldset> #// 也可以既直接静态使用类样式 和 动态绑定类样式结合的方式绑定 class <fieldset> <legend>class绑定:动态绑定和静态绑定结合</legend> <p class="cls2" :class="myClass">不念过去,不畏将来</p> </fieldset> #// 使用动态绑定class 的方式, 但是写死类名.(少用, 基本不用, 无意义) <fieldset> <legend> class绑定:静态绑定,使用动态的方式绑定数据,同时内部使用静态值 </legend> <p :class="['cls1','cls2','cls3']">不念过去,不畏将来</p> </fieldset> </div> <p id="p1"></p> <script type="text/javascript"> // 实例化Vue对象 const vm = new Vue({ el: "#app", data: { myClass: "cls", isCls: true, isCls2: true, class1: "cls1", class2: "cls2", class3: "cls3", }, methods: { changeClass1() { this.myClass = "cls1"; // 修改类样式 }, changeClass2() { this.isCls = !this.isCls; }, changeClass3() { this.class1 = ""; this.class2 = ""; this.class3 = ""; }, }, }); </script> </body>
7. Vue中 style 样式的操作
Vue 中通过style的方式操作样式
<head> <title>title</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="app"> #// style 中书写的时候, 有多个值, 采用对象写法. <fieldset> <legend>style操作:style中书写的时候有多个值,采用对象写法</legend> <p :style="{color: fontColor, fontSize: size}">坚持不懈</p> <button @click="changeStyle">修改style</button> </fieldset> #// style 书写的时候, 采用数组写法, 数组中每个元素是一个对象的写法. <fieldset> <legend>style操作:动态操作设置键值,采用数组写法</legend> <p :style="[styleColor, styleSize]">努力拼搏</p> <button @click="changeStyle2">添加style样式</button> </fieldset> </div> <script type="text/javascript"> // 实例化 Vue 对象 const vm = new Vue({ el: "#app", data: { fontColor: "green", size: "50px", styleColor: { color: "cyan", }, styleSize: { fontSize: "40px", }, }, methods: { changeStyle() { this.fontColor = "red"; this.size = "20px"; }, changeStyle2() { this.styleColor = { color: "gold", }; this.styleSize = { fontSize: "20px", }; }, }, }); </script> </body>
8. v-if 和 v-show 指令
v-if 和 v-show 指令,用来动态控制 页面中元素是否显示
v-if 和 v-show指令的区别
用v-if指令控制的元素, 这个标签在页面中要么有, 要么没有. 而用 v-show 指令是设置标签的 display 属性是否显示. # v-if v-if 指令,有更高的切换开销, 因此, 如果频繁切换dom, 一般使用 v-show指令 # v-show v-show指令, 有更高的初始化开销, 如果运行条件很少改变, 一般使用v-show指令比较合适.
9. v-for 指令
v-for 指令循环遍历显示多个页面内容.
10.0 事件参数对象传递
在Vue中, 函数如果要传递事件参数对象, 必须在调用时函数参数里, 以
$event
的方式传递参数.<button @click="showMessage2('我要传事件参数', $event)">按钮2</button> showMessage2(text, e){ console.log(text,e); }
11.0 事件修饰符和按键修饰符
事件的修饰符
// 阻止浏览器默认行为 @click.prevent // 阻止事件冒泡 @click.stop
按键修饰符
12.0 Vue的生命周期相关的方法
Vue官网一共有十一个生命周期函数, 常用的有 8 个生命周期函数
// 初始化之前 beforeCreate // 初始化之后 created // 界面显示前 beforeMount // 界面显示后 mounted // 数据更新前 beforeUpdate // 数据更新后 updated // 实例销毁前 beforeDestroy // 实例销毁之后 destroyed
13.0 过滤器
/** * Vue1.0中有自己的过滤器:filter * Vue2.0中所有过滤器全部被干掉,如果需要则自己定义 * 过滤器:对要显示的数据进行特定格式化再显示 * 1.定义 过滤器: * Vue.Filter(filterName,function(value,[arg1,arg2,...]){ * return newValue * }) * 2.使用 过滤器: * <div>{{myData|filterName}}</div> * <div>{{myData|filterName(arg)}}</div> */
Vue中过滤器主要是用来对一些数据进行格式化的操作
<h3>开始时间:{{time | formatTime}}</h3> // 定义过滤器 Vue.filter('formatTime',function (value) { return moment(value).format('YYYY-MM-DD hh:mm:ss') }) const vm = new Vue({ el: "#app", data: { time: Date.now() - 1000, }, });
自定义指令
关于自定义指令我们可以查看官网, 自行学习.理解会用即可
自定义插件
关于自定义插件我们可以查看官网, 自行学习. 理解会用即可
总结
交流学习加WeChat:
Gene199302
(备注技术交流):