MVVM
- M：模型(Model) ：对应 data 中的数据
- V：视图(View) ：模板
- VM：视图模型(ViewModel) ： Vue 实例对象
Tip：
V 视图可以 与 VM视图模型 的代码结合书写
el: 挂载点
el作用是为vue实例提供挂载元素，指明Vue实例的挂载目标
data: 数据
data选项可以定义数据，这些数据可以绑定到实例对应的模板中
methods: 方法
<div id="app"> <p>{{ showInfo() }}</p> </div> <script> var vm = new Vue({ //实例化vue对象 // el属性：指定程序界面 // data属性：指定程序使用数据 el: '#app', data: { name:'wei_shuo', url:'www.csdn.net' }, methods:{ showInfo:function(){ //return this.$data.name + ":" + this.url; 两种写法 return this.name + ":" + this.url; } } }); </script> // 页面显示 wei_shuo : www.csdn.net
指令
格式 指令:参数.修饰符=“表达式(变量)” 指令:参数=“表达式(变量)”
v-text
定义纯文本
<div id="app"> <h3 v-text="name"></h3> <h3> {{ name }} </h3> //v-text="name"的缩写 </div> <script> var app = new Vue({ el:"#app", data:{ name:"周杰伦" } }); </script> // 页面显示 周杰伦
v-html
定义纯文本，且可以编译识别html标签
<div id="app"> <h3 v-html="name"></h3> </div> <script> var app = new Vue({ el:"#app", data:{ name:"<h1>周杰伦</h1>" } }); </script> // 页面显示 周杰伦
v-html 和 v-text 区别
v-text无法编译识别html标签，而html可以编译识别
<div id="app"> <p v-text="name1"></p> <p v-html="name2"></p> </div> <script> var app = new Vue({ el:"#app", data:{ name1:"<h1>周杰伦</h1>", name2:"<h1>周杰伦</h1>" } }); </script> // 页面显示 name1 ：<h1>周杰伦</h1> name2 ： 周杰伦
v-model
- v-model指令可以在表单 input、textarea以及select元素上创建
双向数据绑定它会根据控件类型自动选取正确的方法来更新元素- v-model = v-bind + v-on
- 获取和设置表单元素的值(双向数据绑定)
- 绑定数据 -----表单元素的值(同步更新)
<div id="app"> <!-- 输入框内容修改，message也修改，修改message，input内容也修改，双向绑定 --> <input type="text" v-model="message">{{message}} </div> <script> const app = new Vue({ el:"#app", data:{ message:"wei_shuo" } }) </script>
<div id="app"> <!-- 双向绑定--> <input type="text" v-model="message" @keyup.enter="getM"> <h2>{{message}}</h2> <input type="button" value="修改message" @click="setM"> </div> <script> var app = new Vue({ el:"#app", data:{ message:"wei_shuo" }, methods:{ getM:function (){ alert(this.message) //创建getM方法验证，v-model是否双向绑定 }, setM:function (){ this.message = "lishun"; //创建setM方法验证，v-model是否双向绑定 } }, }) </script>
v-on
- v-on指令作用是为元素绑定事件
- v-on指令可以简写为@:on
- 绑定的方法在methods中
- 方法内部通过this关键字访问定义在data中的数据
<div id="app"> <div class="inpute-num"> <button @click="sub"> - </button> <span>{{ num }}</span> <button @click="add"> + </button> </div> </div> <script> var app = new Vue({ el: "#app", data: { num: 1 }, methods: { add: function () { // console.log('add') if (this.num < 10) { this.num++; } else { alert('别点了，最大了') } }, sub: function () { // console.log('sub') if (this.num > 0) { this.num--; } else { alert('别点了，最小了！') } } } }) </script>
v-on事件修饰符
- 事件绑定的方法写成函数调用的形式，可以传入自定义参数
- 定义方法时，需要定义形参来接收传入的实参
- 事件的后面跟上 .修饰符 可以对事件进行限制
- .enter可以限制触发的按键为回车
<div id="app"> <input type="button" value="点击" @click="doIT(666,'老铁')"> <!-- 输入文字触发方法--> <!-- <input type="text" @keyup="sayHi"> --> 输入文字触发方法 <input type="text" @keyup.enter="sayHi"> </div> <script> var app = new Vue({ el:"#app", methods:{ doIT:function (p1,p2){ console.log("做IT"); console.log(p1); console.log(p2); }, sayHi:function (){ alert("吃了没") } } }) </script>
v-show
切换元素的显示状态 true显示 false隐藏
<div id="app"> <input type="button" value="切换显示状态" @click="changeIsShow"><br> <img v-show="isShow" src="img/monkey.png" alt=""> </div> <script> const app = new Vue({ el: '#app', data: { isShow: false, age: 17 }, methods: { changeIsShow: function () { this.isShow =! this.isShow; //通过调用对isShow的值进行取反 } } }) </script>
v-bind
- v-bind作用：
动态绑定属性- 除了内容需要动态决定，属性我们也希望动态绑定 比如a元素的href属性、img元素的src属性
<div id="box"> <img v-bind:src="url"> </div> <script> let myDate = { url : 'images/00.jpg' //绑定图片地址 }; let demo = new Vue({ el : '#box', data : myDate }); </script>
条件判断
v-if
<div id="app"> <div v-if="score>=90"> wei_shuo入选CSDN最热博主 </div> </div> <script> var demo = new Vue({ el: '#app', data:{ score:90 //分数 } }) </script> // 页面显示 wei_shuo入选CSDN最热博主
v-else
搭配 v-if 使用
<div id="app"> <div v-if="score>=90"> wei_shuo入选CSDN最热博主 </div> <div v-else> 你说得对 </div> </div> <script> var demo = new Vue({ el: '#app', data:{ score:80 //分数 } }) </script> // 页面显示 你说得对
v-for
- 根据数据生成列表结构
- 数组经常和v-for结合使用
- 语法是(item,index) in 数据
案例：实现菜名添加和删除
<div id="app"> <input type="button" value="添加数据" @click="add"> <input type="button" value="删除数据" @click="remove"> <ul> <li v-for="(item,index) in arr"> {{ index + 1}} wei_shuo:{{ item }} </li> </ul> <h2 v-for="item in vegetables" v-bind:title="item.name"> {{item.name}} </h2> </div> <script> var app = new Vue({ el:'#app', data:{ arr:["北京","广州","上海","深圳"], vegetables:[ {name:"番茄炒鸡蛋"}, {name:"鸡蛋炒番茄"} ] }, methods:{ add:function (){ this.vegetables.push({name:"花菜炒蛋"}) //创建添加方法 }, remove:function (){ this.vegetables.shift() //创建删除方法 } } }); </script>
v-if 和 v-show 区别
v-if 和v-show 实现的功能类似，但是两者也有着本质的区别
在进行 v-if 切换时，因为v-if 中的模板可能包括数据绑定或子组件，所以Vue.js会有一个局部编译/卸载的过程。而在进行v-show切换时，仅发生了样式的变化。因此从切换的角度考虑，v-show 消耗的性能要比v-if小
v-if 是惰性的，如果在初始条件为 false 时，v-if 本身什么都不会做，而使用v-show 时，不管初始条件是真是假，DOM 元素总是会被渲染。因此从初始渲染的角度考虑，v-if 消耗的性能要比v-show 小。总的来说，v-if 有更高的切换消耗而v-show 有更高的初始渲染消耗。因此，如果需要频繁地切换，则使用v-show 较好；如果在运行时条件很少改变，则使用v-if 较好
