一、Vue模板语法
1.理解
1）渐进式JavaScript框架
2）采用自底向上的增量开发
3）Vue核心关注视图4)MVVM:
Model ——> ViewModel ——> View
Model <—— ViewModel <—— View
视图的改变，会影响数据，反之亦然。
2.Vue的基础语法
1）引入Vue的JS文件，搭建好Vue环境
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>2）准备DOM结构
3)实例化Vue组件 new Vue({ // 挂载元素 el:"#app", // el 是element的简写，绑定id为app的html代码片段 // 定义组件内部数据 data:{ // 数据格式是JSON格式的键值对 msg:"Hello Vue!" } }); 4、获取组件中的数据 "mustache"语法获取数据：{{key}} 双花括号取值，key代表的是vue组件中data属性的key<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue</title> <!-- 1.引入Vue的核心JS文件 --> <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <!-- 2.准备DOM结构 --> <div id="app"> <!-- 4.获取组件中的数据 "mustache"语法获取数据：{{key}} 双花括号取值，key代表的是vue组件中data属性的key --> {{msg}} </div> </body> <script type="text/javascript"> /*3.实例化Vue组件*/ new Vue({ //挂载元素 el:"#app",//el是element的简写，绑定id为app的HTML代码片段 //定义组件内部数据 data:{ //数据格式是json格式的键值对 msg:"Hello Vue" } }); </script> </html>
3.插值、JavaScript表达式
插值
"mastache"模板（双花括号），支持表达式，不支持语句<div id="app"> <!-- 插值： "mastache"模板（双花括号），支持表达式，不支持语句 --> <div>{{msg}}</div> <!-- 插值：--> <div>{{num+1}}</div> <!-- 数值运算 --> <div>{{flag?"好":"不好"}}</div> <!-- 三目运算符--> <div>{{msg.split("").reverse().join("")}}</div> <!-- 字符串方法 --> </div> </body> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ msg:"hello world", num:10, flag:true } }); </script>
二、指令
1.理解
1）指令 (Directives) 是带有 v- 前缀的特殊属性。
2）指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
2.文本指令
1）v-text（默认）
渲染文本，响应式。数据改变，则DOM改变。
简写： {{}}2）v-once
只会绑定一次，之后数据改变不再影响DOM
- v-html
渲染文本，可以渲染html格式的文本<div id="app"> <!-- v-text --> <div v-text="msg"></div> <div>{{msg}}</div> <!-- v-once --> <div v-once>{{msg}}</div> <!-- v-html --> <div>{{text}}</div> <div v-html="text"></div> </div> </body> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ msg:"Hello Vue!", text:"<h2>江西</h2>" } }); </script>
3.bind指令
v-bind
v-bind指令可以绑定元素的属性，动态给属性赋值。
语法：v-bind:属性名 = "属性值"
简写： :属性名 = "属性值"<div id="app"> <div title="不错">你觉得怎么样？</div> <div v-bind:title="msg">你觉得怎么样？</div> <!-- 简写版 --> <div :title="msg">你觉得怎么样？</div> <hr /> <a href="https://cn.vuejs.org/">Vue</a> <br /> <a :href="website">hello</a> <hr /> <img src="https://cn.vuejs.org/images/logo.png" /> <img :src="srcUrl" /> </div> </body> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ msg:'very good', website:"https://cn.vuejs.org/", srcUrl:"https://cn.vuejs.org/images/logo.png" } }); </script>
4.class绑定
绑定多个class
使用对象classObject绑定
使用数组classList绑定
区别：对象classObject和数组classList
对象classObject可以动态添加和删除样式名，而数组classList只能添加样式名<div id="app"> <!-- 绑定多个class --> <div class="active bg">hello</div> <br> <div :class="{active:true,bg:false}">hello</div> <!-- 对象绑定 --> <div :class="classObj">hello</div> <!-- 数组绑定 --> <div :class="classList">hello</div> </div> </body> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ /* 使用对象classObject绑定 */ classObj:{ active:false, bg:true }, /* 数组 */ classList:["bg","flex","test"] } }); </script>
5.style绑定
1）使用内联对象Object
2）直接传入对象styleObject
3）使用数组对象styleList<div id="app"> <div style="background-color: antiquewhite;color: #FF0000;">Vue</div> <hr> <div :style="{backgroundColor: bgcolor,color: fontcolor}">Hello</div> <div :style="styleObj">Hello</div> <div :style="styleList">Hello</div> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ bgcolor:'antiquewhite', fontcolor:'red', styleObj:{ color:"blue", backgroundColor:"red" }, styleList:[ { color:"blue", backgroundColor:"red" }, { width:"200px", height:"100px" } ] } }); </script>
6.绑定事件
v-on:事件名
简写： @事件名
<div id="app"> <div>{{count}}</div> <button type="button" v-on:click="count++">add</button> <button type="button" @click="count--">down</button> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ count:0 } }); </script>
7.方法事件处理器
一般来说事件会绑定一个方法，在方法内部处理相关的事件逻辑。
需要在methods属性中定义方法，然后v-on引用对应相关的方法名。
在Vue组件中定义methods属性，在methods属性中定义函数
methods:{
函数名:fucntion(){
},
函数名(){
}
}<div id="app"> <div>{{count}}</div> <button type="button" v-on:click="add">add</button> <button type="button" @click="down">down</button> </div> </body> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ count:0 }, //组件内部方法 methods:{ add:function(){ this.count++; }, down(){ this.count--; } } }); </script>
8.$even对象
在事件处理函数中访问DOM原生事件event对象，可以使用特殊变量$event对象传入。
事件调用函数时，加括号与不加括号的区别？
如果事件调用函数，未添加括号，则默认传递 e v e n t 对 象 ； 如 果 函 数 添 加 了 括 号 ， 则 需 要 手 动 传 递 event对象；如果函数添加了括号，则需要手动传递 event对象；如果函数添加了括号，则需要手动传递event参数<div id="app"> <div>{{count}}</div> <button type="button" v-on:click="add($event)">add</button> <button type="button" @click="down">down</button> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ count:0 }, // 组件内部方法 methods:{ // add 代表的函数名/方法名；e 代表的是形参名 add:function(e){ console.log(e); // 事件对象 console.log(e.type); // 事件类型 console.log(e.target); // 事件触发的目标 this.count++; }, down(){ this.count--; } } }); </script>
9.事件修饰符
Vue.js 为 v-on 提供了事件修饰符。通过由点 (.) 表示的指令后缀来调用修饰符。
stop ： 阻止event冒泡，等效于event.stopPropagation()
prevent ： 阻止event默认事件，等效于event.preventDefault()
capture ： 事件在捕获阶段触发
self ： 自身元素触发，而不是子元素触发
once ： 事件只触发一次<div id="app"> <!-- 默认 --> <div @click="father"> <h3>父元素</h3> <button type="button" @click="child">按钮</button> </div> <!-- stop:阻止event冒泡，等效于event.stopPropation() --> <div @click="father"> <h3>父元素</h3> <button type="button" @click.stop="child">按钮</button> </div> <!-- prevent:阻止event默认事件，等效于event.preventDefault() --> <a href="https://cn.vuejs.org/" @click.prevent="test">Vue</a> <hr /> <!-- capture :事件在捕获阶段触发 --> <div @click.capture="father"> <h3>父元素</h3> <button type="button" @click.capture="child">按钮</button> </div> <!-- self:自身元素触发，而不是子元素触发 --> <div @click.self="father"> <h3>父元素</h3> <button type="button" @click="child">按钮</button> </div> <!-- 事件只触发一次 --> <div @click.once="father"> <h3>父元素</h3> <button type="button" @click="child">按钮</button> </div> </div> </body> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ count:0 }, //组件内部方法 methods:{ father:function(){ console.log("父元素。。。。"); }, child:function(){ console.log("子元素。。。。"); }, test:function(){ console.log("你好啊。。。。"); } } }); </script>
10.键值对修饰符
键值修饰符
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right<div id="app"> <input @keyup.enter="enterKey"/>enter 键 <hr> <input @keyup.13="enterKey"/>enter 键 <hr> <input @keyup.delete="deleteKey"/>delete 删除键 <hr> <button @keyup.enter="enterKey">回车</button> <hr> <form action="https://cn.vuejs.org/" method="get"> 姓名：<input @keyup.enter="submit2"/> <br> 密码：<input type="text"/> <br> </form> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ count:0 }, // 组件内部方法 methods:{ enterKey: function () { console.log('enter 键 触发...'); }, deleteKey: function () { console.log('delete 删除键 触发...'); }, submit2:function(){ document.getElementsByTagName("form")[0].submit(); } } });
11.表单校验
Vue <style> .success{ color: green } .error { color: red; } </style> </head> <body> <div id="app"> 姓名：<input type="text" v-model="uname" @input="valid" /> <span :class="validClass" >{{validTxt}}</span> <hr> 用户名：{{uname}} </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ uname:"", validTxt:"", validClass:{ success:false, error:false } }, // 组件内部方法 methods:{ valid:function(){ // 判断文本框的值长度是否大于6 if (this.uname.length > 6) { this.validTxt = "校验成功"; //this.validClass = "success"; this.validClass.success = true; this.validClass.error = false; } else { this.validTxt = "校验失败"; //this.validClass = "error"; this.validClass.error = true; this.validClass.success = false; } } } });
12.if指令
v-if
条件判断，满足则执行
v-else-if
配合v-if一起使用，作为一个条件判断
v-else
配合v-if一起使用，条件不满足执行
v-show
根据条件渲染html，使用类似v-if
v-if 和 v-show
两者的区别是v-if是“真正”的条件渲染，只有为true时才会被渲染。v-if也是“惰性”的，假如初始条件为false，那么条件变为true时才会发生第一次渲染。
v-show只是CSS的display属性的切换，不论初始条件是否成立，都会进行html渲染，然后改变display的值为none或者block。
一般来说v-if开销比较大，如果需要频繁切换显示不显示使用v-show，需要进行条件判断的但是改变很少的使用v-if。<div id="app"> <div v-if="flag">你能看见我！</div> <div v-else>你看不见我！</div> <hr> <div v-if="num==10" > <h4>num的值为10</h4> </div> <div v-else-if="num==11"> <h4>num的值为11</h4> </div> <div v-else> <h4>num的值 不为10 和 11</h4> </div> <hr> <div v-show="flag">True</div> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ num:12, flag:false }, }); </script>
13.for指令
v-for
可以把一组值进行列表渲染
语法形式： item in items
items 是源数据数组
item 是数组元素迭代的别名。
在 v-for 块中，对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
遍历数组
语法：
item in items
(item,index) in items
说明：
item：数组元素迭代的别名
items：源数据数组
index：当前项的索引
遍历对象
v-for也可以遍历对象，可以指定三个形参:
语法：
(value,key,index) in object
说明：
value：对象中属性的值
key：对象中属性的键
index：当前项的索引
object：源数据对象
key属性
用 v-for渲染列表时， 使用key属性给每个指定一个唯一的ID表示，那么可以在下次数据渲染时，提高渲染速度。它默认用“就地复用”策略。
如果数据项的顺序被改变，重复ID的元素将会被再次使用，不会重新渲染。这个默认的模式是高效的。需要用 v-bind 来绑定动态值 (在这里使用简写)：
取值范围
v-for也可以指定整数，用来重复多次使用模板。
语法：
v-for="i in num"
说明：
i：当前数
num：结束数<div id="app"> <!-- 遍历数组 --> <ul> <li v-for="f in list">{{f.name}} -- {{f.price}}</li> </ul> <hr > <ul> <li v-for="(item,index) in list"> {{index}} -- {{item.name}} </li> </ul> <hr> <!-- 遍历对象 --> <ul> <li v-for="(value,key,index) in person"> {{index}} -- {{key}} -- {{value}} </li> </ul> <hr > <ul> <li v-for="(item,index) in list" :key="item.id"> {{index}} -- {{item.name}} </li> </ul> <!-- 遍历指定次数 --> <ul> <li v-for="i in 5">第{{i}}次</li> </ul> <hr> <ul> <li v-for="i in num">第{{i}}次</li> </ul> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ // 数组 list:[ {id:1,name:'西瓜',price:15}, {id:2,name:'苹果',price:10}, {id:3,name:'菠萝',price:25} ], // 对象 person:{ name:'Tim', age:12, love:'music' }, num:10 }, });
14.表单输入绑定
用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。
因为它会选择 Vue 实例数据来作为具体的值。
通过 JavaScript 在组件的 data 选项中声明初始值。 文本框
v-model双向数据绑定
复选框
单个使用时v-model是逻辑值：true和false，
多个一起使用需要指定value值，选中结果绑定v-model的数组。<div id="app"> <!-- 文本框 --> 姓名：<input type="text" v-model="uname"/> <br> 姓名:{{uname}} <hr > <!-- 复选框 --> 是否喜欢：<input type="checkbox" v-model="isLike" /> <br> 是否喜欢：{{isLike}} <hr > 课程： <input type="checkbox" v-model="lesson" value="html">Html <input type="checkbox" v-model="lesson" value="java">Java <input type="checkbox" v-model="lesson" value="python">python <br> 课程：{{lesson}} <hr > <!-- 单选框 --> <input type="radio" value="yes" v-model="love"> <label>喜欢</label> <input type="radio" value='no' v-model="love"> <label>不喜欢</label> <br> <!-- select 下拉框 --> <select v-model="selected"> <option>下雨</option> <option>晴天</option> <option>多云</option> </select> <br> <!-- 遍历集合 选中第二个 --> <select v-model="selected2"> <option v-for="item in list" :value="item.value">{{item.name}}</option> </select> </div> </body> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ uname:"", isLike:true, lesson:[], love:"", selected:"晴天", list:[ {name:"西瓜",value:"1"}, {name:"香蕉",value:"2"}, {name:"苹果",value:"3"} ], selected2:"2" } });
15.修饰符
使用v-model绑定数据后，可以使用修饰进行数据处理：
.lazy：绑定数据默认实时更新，lazy可以在onChange触发
.number：返回数字类型的值，转换不成返回NaN
**.trim：**去除数据的前后空格<div id="app"> 姓名：<input type="text" v-model="uname" /> <br> <!-- .lazy：绑定数据默认实时更新，lazy可以在onChange触发 --> 姓名：<input type="text" v-model.lazy="uname" /><br> 年龄：<input type="text" v-model="age"><br> <!-- .number：返回数字类型的值，转换不成返回NaN --> 年龄：<input type="text" v-model.number="age"><br> <br> <!-- .trim：去除数据的前后空格 --> 姓名：<input type="text" v-model.trim="userName"><br> <button @click="show">显示</button> <hr> 姓名：{{uname}}<br> 年龄：{{age}}<br> 姓名：{{userName}}<br> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ uname:"", age:'10', userName:"" }, methods:{ show:function(){ console.log(this.age); // console.log( typeof this.age); } } });
三、组件
1.组件的定义和使用
组件可以扩展 HTML 元素，封装可重用的代码。
Vue自定义组件分为两种：
全局注册和局部注册，全局组件可以在任何地方引用，局部组件只能在当前Vue实例使用。定义组件
全局注册： 使用Vue.component(tagName, options)来定义 tagName 代表的是组件名，所有在定义组件时尽量使用中划线“-”来指定组件名 options 代表的是组件中的相关配置 template 组件的模板局部注册 在Vue实例对象中，通过components属性设置局部组件 components:{ tagName:{ template:"内容" } } tagName 代表的是组件名，所有在定义组件时尽量使用中划线“-”来指定组件名 template 组件的模板 注意： HTML 特性是不区分大小写的，所有在定义组件时尽量使用中划线“-”来指定组件名。 即使，使用了驼峰标示命名如：myComponent，在页面引用时仍然要使用<my-component>进行引用。 使用组件 在指定的元素中，使用 <组件名></组件名> 方式 注：可以使用单标签（<组件名/>），但不建议；如果使用了，后面的代码不会生效<div id="app"> <!--使用组件 --> <my-hello></my-hello> <my-hello></my-hello> <!-- <my-hello/> --><!-- 不建议使用单标签，如果使用了，后面的代码不会生效 --> <my-hello2></my-hello2> </div> <hr> <div id="root"> <my-hello></my-hello> <my-hello2></my-hello2> </div> </body> <script type="text/javascript"> /* 全局注册 */ Vue.component('my-hello',{ template:'<h4>Hello</h4>' }); var app = new Vue({ el:"#app", data:{ }, // 定义局部组件 components:{ "my-hello2":{ template:"<h3>Hello Vue</h3>" } } }); new Vue({ el:"#root", data:{ } });
2.is属性
在table标签中直接使用自定义组件，无法正常显示。DOM解析时会解析到
标签的外部
原因是：
table/ol/ul/select 这种html标签有特殊的结构要求,不 能直接使用自定义标签。他们有自己的默认嵌套规则
解决方案：
可以使用is进行标签转换
<指定元素 is=“组件名”></指定元素>
<table id="app"> <tr is="my-hello"></tr> </table> <hr> </body> <script type="text/javascript"> /* 全局注册 */ Vue.component('my-hello',{ template:'<h4>Hello</h4>' }); var app = new Vue({ el:"#app", data:{ } });
3.模板
1)直接使用字符串定义
单行字符串 ""或’’
多行字符串 ``2)使用
4.data属性
通过data属性指定自定义组件的初始数据，要求data必须是一个函数，如果不是函数就会报错。
<div id="app"> <my-hello></my-hello> <hr > <my-hello></my-hello> <hr > <my-hello></my-hello> </div> </body> <script type="text/javascript"> /* 全局注册 */ /* 单行字符串 */ Vue.component('my-hello',{ template:` <div> 数值：{{count}} --- {{msg}}<br/> <button @click="count++">add</button> </div> `, data:function(){ return {count:0,msg:"Hello"}; } }); var app = new Vue({ el:"#app", data:{ } });
2141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
