Vue的语法
- mustache语法糖对数据类型的支持( js语法的支持 )
- 数据类型:
- 第一种划分:
- 基础数据类型: number string boolean
- 复杂数据类型: Object( array function )
- 特殊数据类型: null undefined
- 第二种划分:
- 初始数据类型: number string boolean null undefined
- 引用数据类型: object( array function )
- 结论: mustache支持我们js的数据类型的
- conosle.log 和 alert 在我们mustache语法中是不支持的
问题
- 我们说vue是 MVVM 框架, 那么谁是 M 谁是 V 谁是 VM
- M: Model 数据
- V: View 视图
- VM: ViewModel 视图模型( new Vue() )
//<div id="app"></div> V
var vm = new Vue({
el: '#app',//给跟实例一个模板( 挂载 )
data: { //M
}
})
简单的数据渲染
- 单纯数据渲染
/*<div id="app">
<p> {{ this.msg }} </p>
<p> {{ this.$data.msg }} </p>
<p> {{ this._data.msg }} </p>
<p> {{ msg }} </p>
</div>*/
var vm = new Vue({
el: '#app',
data: {
msg: 'hello vue.js'
}
})
- 多种数据渲染
/*<div id="app">
<p> number: {{ num }} </p>
<p> string: {{ str }} </p>
<p> boolean: {{ bool }} </p>
<p> null: {{ nul?'1':'2' }} </p>
<p> undefined: {{ und && 1 || 2 }} </p>
<p> object: {{ obj.name }} </p>
<p> array: {{ arr[0] }} </p>
<p> fn: {{ fn() }} </p>
</div>*/
var vm = new Vue({
el: '#app',
data: {
num: 100,
str: 'hello Vue.js',
bool: true,
nul: null,
und: undefined,
obj: {
name: 'Gabriel Yan'
},
arr: [1,2,3,4],
fn: function () {
alert( 2 )
return '这是一个函数'
}
}
})
mustache 绑定 dom的属性
指令: ( 是绑定在dom属性上 )
- v-html: 可以解析标签型数据( 可以将一个数据展示在一个dom的内容中( 相当于使用了 innerHTML ))
- v-text:可以将一个数据展示在一个dom的内容中( 相当于使用了 innerHTML )
条件渲染的指令
- v-show : 可以控制一个dom的显示隐藏( 这个指令操作的是dom的display属性 )
- v-if : 可以控制一个dom的存在与否( 创建 和 销毁 )
- v-else
- v-else-if
/*<div id="app">
<h3> v-show </h3>
<p v-show = "showFlag"> v-show指令 </p>
<hr>
<h3> v-if - 单路分支 </h3>
<p v-if = "ifFlag"> v-if - 指令的单路分支 </p>
<h3> v-if - 双路分支 </h3>
<p v-if = "ifFlag"> 双路分支 成立 </p>
<p v-else> 双路分支不成立 </p>
<h3> v-if - 多路分支 </h3>
<p v-if = " type === 'A'"> A </p>
<p v-else-if = " type === 'B'"> B </p>
<p v-else> C </p>
</div>*/
var vm = new Vue({
el: '#app',//给跟实例一个模板( 挂载 )
data: {
showFlag: true,
ifFlag: false,
type: 'A'
}
})
面试题( 实用题 ) 【 钻石级别 】
- v-if vs v-show 区别
- 实用: 项目中 如何选择这两个使用
- v-if 操作的是dom元素( 组件 ) 的创建或是销毁
- v-show 操作的是dom元素的display属性
- v-if可以有多种使用形式: 单路分支, 多路分支, 双路分支
- v-show 只能写一个单路形式
- 一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
v-html
- 案例: v-html
/*<div id="app">
<p v-html = "h"></p>
<p v-text = "msg"></p>
<p v-text = " flag && 1 || 2 " > </p>
</div>*/
var vm = new Vue({
el: '#app',
data: {
msg: 'hello Vue.js',
h: '<h3> hello Vue.js </h3>',
flag: true
}
})
- 分析:
- 发现dom元素直接有了一个内容,这种属性绑定就是为了操作dom
- 结论:
- 这种属性绑定的形式就是为了操作dom,我们给这种属性起了一个好听的名字
- Vue 1.0 叫它 属性指令( 借鉴Angular来的 )
- Vue 2.0 统称为 ‘指令’
- 指令是用一个 v-xxx 表示
- 指令是用来操作dom
- Vue中不允许直接操作dom(待分析)
- 注意
- mustache语法 — 属性写法 的属性值是直接写数据的,不需要使用 {{ }}
v-for
- 数组 v-for = " (item,index) in arr " item是arr中每一个元素
- 对象 v-for = "(item,key,index) in obj " item是obj的属性值 key是键
- json类型数据
- 嵌套类型数据
/*<div id="app">
<h3> 数组 </h3>
<ul>
<li v-for = " (item,index) in arr ">
<p> item :{{ item }} -- index: {{ index }}</p>
</li>
</ul>
<hr>
<h3> 对象 </h3>
<ul>
<li v-for = "(item,key,index) in obj">
<p> value: {{ item }} -- key: {{ key }} -- {{ index }} </p>
</li>
</ul>
<hr>
<h3> json </h3>
<ul>
<li v-for = "(item,index) of json">
<p> id: {{ item.id }} </p>
<p> task: {{ item.task }} </p>
<p> {{ index }} </p>
</li>
</ul>
<hr>
<h3> 嵌套 </h3>
<ul>
<li v-for = " item in lists ">
<p> id: {{ item.id }} </p>
<ul>
<li v-for = "todo in item.todos">
todos中的数据 -- {{ todo }}
</li>
</ul>
</li>
</ul>
</div>
*/
new Vue({
el: '#app',
data: {
arr: [1,2,3,4],
obj: {
id: 1,
name: 'zhaoliu',
sex: 'man',
age: 18
},
json: [
{
id: 1,
task: '敲代码1'
},
{
id: 2,
task: '敲代码2'
}
],
lists: [
{
id: 1,
todos: {
id: 1,
name: 'zhansan'
}
},
{
id: 2,
todos: {
id: 2,
name: 'lisi'
}
}
]
}
})
- key : 给没一个循环的列表添加一个唯一的标识
- 使用指令 v-bind 来绑定 key
<div v-for = " (item,index) in lists" v-bind:key =" item.id "></div>
- 简写
```
<div v-for = " (item,index) in lists" :key = " item.id "></div>
```
- 如果有id,那么我们就使用id,如果没有,我们才会选择index
- v-bind: 单项数据绑定: 将一个数据绑定在一个dom的属性上
vue中如何给dom添加类名
- 直接在dom上绑定类名
- vue中类名绑定 - 对象形式
- 目的: 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>
- 格式: v-bind:class = “{ 属性: boolean }”
- 格式: v-bind:class = “{ [data]: boolean }”
- vue中类名绑定的形式 - 数组的形式 【 推荐 】
- 格式: v-bind:class = “[ 数据 ]”
-
类名绑定不会覆盖原先的类名
-
为什么要绑定类名
- 指令是用来操作dom
- 目的: 为了将来通过数据来操作类名,类名操作dom
样式的绑定
- 对象的形式
- 数组的形式
html代码
<div id="app">
<h3> style </h3>
<hr>
<h3> style - 对象形式 </h3>
<p :style = "{ width: size.width,height: size.height,background: 'red'}"></p>
<h3> style - 数组的形式 </h3>
<p :style = "[ { width: '100px',background: 'blue'},{ height: '100px' } ]"></p>
<p :style = "[ size,bg ]"></p>
</div>
js代码
new Vue({
el: '#app',
data: {
size: {
width: '100px',
height: '100px'
},
bg: {
background: 'purple'
}
}
})
事件
问题: javascript事件添加有几种形式
- 事件绑定
dom.onclick = function () {}
dom: 事件源
on: 绑定事件的形式
click: 事件类型
function(){} 事件处理函数
- 事件监听 : addeventListener
- 直接在标签中绑定事件
- vue采用了第三种,也是通过属性的形式绑定在dom身上
<div v-on:click = "事件名称"></div>
- 简写 v-on: — > @
<div id="app">
<button v-on:click = "helloHandler"> 点击 </button>
<button @click = "helloHandler"> 点击 </button>
</div>
var vm = new Vue({
el: '#app',
methods: {
// 存放事件处理程序
helloHandler () {
alert( 'hello' )
}
}
})
console.log( 'vm', vm )
- 事件对象也可以正常使用,在事件处理程序中, 写 e 就可以了
- 问题: 如果事件处理程序中有三个参数,第三个参数才是事件对象e,如何实现
- 分析: 我们发现事件处理程序中的第三个参数 e 不在是事件对象了,而是一个undefined
- 解决: 在函数执行时,传入一个实际参数 $event 来代表事件对象
```
<div id="app">
<!-- <button v-on:click = "helloHandler"> 点击 </button> -->
<button @click = "helloHandler( 10,20,$event)"> 点击 </button>
</div>
var vm = new Vue({
el: '#app',
methods: {
// 存放事件处理程序
helloHandler ( a,b,e ) {
console.log( a )
console.log( b )
console.log( e )
}
}
})
console.log( 'vm', vm )
```
- 问题: 如果我们通过 length = 0 , 来清空一个数组,那么vue检测不到这个变动
- 解决方法: 使用splice
<div id="app">
<button @click = "add"> + </button>
<button @click = "remove"> - </button>
<button @click = "indexHandler"> 修改第二条数据 </button>
<ul>
<li v-for =" item in lists " :key = "item.id">
{{ item.task }}
</li>
</ul>
<hr>
<button @click = "arrChange"> 修改第二条数据 </button>
<ul>
<li v-for = " (item,index ) in arr " :key = "index">
{{ item }}
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
arr: [1,2,3],
lists: [
{
id: 1,
task: '锻炼1'
},
{
id: 2,
task: '敲代码'
}
]
},
methods: {
add () {
// console.log( this )
this.lists.push({
id: this.lists.length + 1,
task: '打篮球'
})
},
remove () {
this.lists.pop()
},
indexHandler () {
//将列表中的第二个数据中的task任务修改为 撸猫
this.lists[1] = {
id: 2,
task: '风哥'
}
// 将整个列表清空
// this.lists.length = 0
// this.lists.splice( 0 )
},
arrChange () {
// this.arr[ 1 ] = '风哥' 不可以检测到的
// this.$set( this.arr,'1','风哥' )
Vue.set( this.arr,'1','风哥')
}
}
})
v-model
- 双向数据绑定
- 默认绑定value值
- v-model应用于表单元素
<div id="app">
<input type="text" v-model = "msg">
<p> {{ msg }} </p>
</div>
new Vue({
el: '#app',
data: {
msg: 'hello Vue.js'
}
})