Vue语法
1、数据类型分类
第一种划分
- 基础数据类型:number string boolean
- 复杂数据类型:object ( array function)
- 特殊数据类型:null undefined
第二种划分
- 初始数据类型:number string boolean null undefined
- 引用数据类型:object ( array function)
注意:mustache支持上述数据类型,但是不支持console.log和alert
2、指令
指令是绑定在dom元素的属性上的
Vue 1.0 中叫属性指令 (借鉴Angular)
Vue 2.0 中统称为指令
指令用 v-xxx 表示
3、示例
var vm = new Vue () {
el:'#app',
data:{
name:'zhangsan'
}
}
Vue是MVVM框架,因此上述代码中的data就是MVVM中的M;el就是MVVM中的视图,vm就是MVVM中的VM
4、指令的具体操作
- v-html: 可以解析标签型数据( 可以将一个数据展示在一个dom的内容中( 相当于使用了 innerHTML ))
- v-text:可以将一个数据展示在一个dom的内容中( 相当于使用了 innerHTML )
- 条件渲染的指令
- v-show:可以控制一个dom的显示隐藏( 这个指令操作的是dom的display属性 )
- v-if:可以控制一个dom的存在与否( 创建 和 销毁 )
- v-else
- v-else-if
5、指令的面试题
面试题( 实用题 ) 【 钻石 】
-
v-if vs v-show 区别
- v-if 操作的是dom元素( 组件 ) 的创建或是销毁
- v-show 操作的是dom元素的display属性
- v-if可以有多种使用形式: 单路分支, 多路分支, 双路分支
- v-show 只能写一个单路形式
-
实用: 项目中 如何选择这两个使用
- 一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
6、指令之for循环:v-for
v-for
-
数组 v-for = " (item,index) in arr " item是arr中每一个元素
-
对象 v-for = "(item,key,index) in obj " item是obj的属性值
-
json类型数据 v-for = “(item,index) in json”
-
嵌套类型数据
<ul> <li v-for = "item in lists"> <p>id: {{item.id}}</p> <ul> <li v-for = "task in item.task"> <p>task : {{ task}}</p> </li> </ul> </li> </ul>
7、 指令之v-bind绑定 key:
-
给没一个循环的列表添加一个唯一的标识
-
使用指令 v-bind 来绑定 key
<div v-for = " (item,index) in lists" v-bind: key = " item.id "></div> 注意: 如果有id,那么我们就使用id,如果没有,我们才会选择index
-
v-bind: 单项数据绑定: 将一个数据绑定在一个dom的属性上
简写: <div v-for = " (item,index) in lists" :key = " item.id "></div>
8、指令之添加类名:class
vue中如何给dom添加类名:
-
直接在dom上绑定类名
<p class="size bg_color"></p>
-
vue中类名绑定 - 对象形式
格式: v-bind:class = "{ 属性: boolean }" 格式: v-bind:class = "{ [data]: boolean }"
<p :class = "{ size: true,bg_color: false }"></p> <p :class = "{ size: true, bg_color: true }"></p> <p :class = "{ [s]: true, [bg_color]: true }"></p> <p :class = "{ [s]: 5>3?true: false, [bg_color]: true }"></p>
- 目的: dom身上属性class 要和 数据绑定
- 解决:v-bind
- 数据中key,我们起的和绑定的对象中的key一样,但是你得知道这两个东西不一样
<p :class = "{ size,bg_color }"></p> size是自定义的属性, 它的属性值是undefined, 相当于是false
<p :class = "{ size: true, bg_color: true }"></p> size也是自定义属性,他的属性是true,那么就会加上去
<p :class = "{ [s]: true, [bg_color]: true }"></p>
-
vue中类名绑定的形式 - 数组的形式 【 推荐 】
格式: v-bind:class = "[ 数据 ]"
例: <p :class = "['size','bg_color']"></p> <p :class = "[ s, bg_color ]"></p> <p :class = "[ flag? s:'box', bg_color]"></p> <p :class = "[ flag? s:'box', bg_color]" class = "yyb"></p>
-
类名绑定不会覆盖原先的类名
-
为什么要绑定类名
1、指令是用来操作dom
2、目的: 为了将来通过数据来操作类名,类名操作dom
9、指令之添加样式:style
样式的绑定: v-bind: style = “”
-
对象的形式
<p :style = "{ width: size.width,height: size.height,background: 'red'}"></p>
-
数组的形式
<p :style = "[ { width: '100px',background: 'blue'},{ height: '100px' } ]"></p>
<p :style = "[ size,bg ]"></p>
10、指令之事件添加
-
事件
问题:javascript事件添加有几种形式
-
事件绑定
dom.onclick = function () {}
dom: 事件源
on: 绑定事件的形式
click: 事件类型
function(){} 事件处理函数
-
事件监听 : addeventListener
-
直接在标签中绑定事件
<div onclick = "事件处理函数名称"></div>
-
-
vue采用了第三种,也是通过属性的形式绑定在dom身上
<div v-on:click = "事件处理函数名称"></div>
简写: @eventType = " handlerName "
-
问题: 函数调用有哪些方法?
直接调用 ()
事件
- 问题: 如果事件处理程序中有三个参数,第三个参数才是事件对象e,如何实现
分析: 我们发现事件处理程序中的第三个参数 e 不在是事件对象了,而是一个undefined
解决: 在函数执行时,传入一个实际参数 $event 来代表事件对象
-
问题: 下标是不能检测变动的,但是我们现在看到了它检测到了
-
问题: 如果我们通过 length = 0 , 来清空一个数组,那么vue检测不到这个变动
解决方法: 使用splice
-
问题: 我们直接修改一个数组下的一个数据时,发现下标不能检测变动了
解决方法: 使用 Vue.set / this.$set
11、指令之v-model
- v-model
- 双向数据绑定
- 默认绑定value值
- v-model应用于表单元素
问题汇总
问题1: 我们直接修改一个数组下的一个数据时,发现下标不能检测变动了
解决方法: 使用 Vue.set / this.$set
问题2: 如果我们通过 length = 0 , 来清空一个数组,那么vue检测不到这个变动
解决方法: 使用splice
问题3:如果事件处理程序中有三个参数,第三个参数才是事件对象e,如何实现
分析: 我们发现事件处理程序中的第三个参数 e 不在是事件对象了,而是一个undefined
解决: 在函数执行时,传入一个实际参数 $event 来代表事件对象
问题4:函数调用有哪些方法?
直接调用 ()
事件
问题5:javascript事件添加有几种形式
-
事件绑定
dom.onclick = function () {}
dom: 事件源
on: 绑定事件的形式
click: 事件类型
function(){} 事件处理函数
-
事件监听 : addeventListener
-
直接在标签中绑定事件
面试题( 实用题 ) 【 钻石 】
-
v-if vs v-show 区别
- v-if 操作的是dom元素( 组件 ) 的创建或是销毁
- v-show 操作的是dom元素的display属性
- v-if可以有多种使用形式: 单路分支, 多路分支, 双路分支
- v-show 只能写一个单路形式
-
实用: 项目中 如何选择这两个使用
- 一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。