模板语法
mustache 语法中是支持写js的
- 用法
<body> <div id="app"> <!-- 内容用法 --> <p> {{ info }} </p> <input type="text" v-model = "info"> <img src=" info " alt=""> </div> </body> <script src="../../lib/vue.js"></script> <script> /* mustache 双大括号语法 用法有两种 1. 内容里面用 加 {{}} 2. dom属性上用 不加 {{}} */ new Vue({ el: '#app', data: { info: '今日周五' } }) </script> - 对js的支持性
<body> <div id="app"> <!-- 注释的代表不支持 --> <p> {{ num }} </p> <p> {{ str }} </p> <p> {{ bol }} </p> <!-- <p> {{ nul }} </p> --> <!-- <p> {{ und }} </p> --> <p> {{ obj.name }} </p> <p> {{ arr[ 0 ] }} </p> <p> {{ fn() }} </p> <!-- <p> {{ console.log( 1 ) }} </p> <p> {{ alert( 1 ) }} </p> --> <p> {{ 1 + 1 }} </p> <p> {{ 5 > 3 ? '真':'假' }} </p> <p> {{ 5 > 3 && '真'||'假' }} </p> <div> <p v-if = "bol"> 猫 </p> <p v-else> 狗 </p> </div> </div> </body> <script src="../../lib/vue.js"></script> <script> new Vue({ el: '#app', data: { num: 100, str: 'string', bol: true, nul: null, und: undefined, obj: { name: 'West Court' }, arr: [ 1,2,3 ], fn: function () { return 10 } } }) </script> - 总结
- null 和 undefined 是不会显示的，其他数据类型都是支持的，可以显示的
- 挂载在window身上的全局属性，我们都不能用的： 比如; console alert
- mustache语法中 不写流程控制
- for
- if
- while
- do…while
- mustache语法中支持三元表达式，同样也支持运算符
- 短路原则也是支持的
指令
指令的目的是做什么： 操作DOM
v-html
转义输出，也就是可以解析 xml 数据
v-text
非转义输出，也就是无法解析 xml 类型数据
v-bind
- 将数据和属性进行单向数据绑定： 将vue中数据赋值给属性值
<img v-bind:src = "src" /> <div v-bind:class = ""> </div> <div v-bind:style = ""> </div> - 简写形式
<img v-bind:src="src" alt=""> <img :src="src" alt=""> - 类名绑定
- 对象形式用法
<p :class = "{ bg: true,size: true }"></p> <p :class = "{ bg: true,size: false }"></p> <p :class = "{ [classA]: true,[classB]: true }"></p> - 数组形式用法
<p :class = "[ 'size','bg' ]"></p> <p :class = "[ classA,classB ]"></p> <p :class = "[ classA,classB,5>3?'a':'b']"> </p> - 样式绑定
- 对象形式用法
<p :style = "{width: '100px',height: '100px',background: 'yellow'}"></p> <p :style = "styleObj"></p> - 数组形式用法
<p :style = "[{width:'100px',height: '100px'},{ background: 'green'}]"></p> <p :style = "[size,bg]"></p>
条件渲染
-
v-if
-
v-else-if
-
v-else
-
v-show 条件展示
<h3> 条件渲染 - 单路分支 </h3> <p v-if = "flag"> A </p> <h3> 条件渲染 - 双路分支 </h3> <p v-if = "flag"> A </p> <p v-else > B </p> <h3> 条件渲染 - 多路分支 </h3> <p v-if = "type === '美食'"> 美食 </p> <p v-else-if = " type === '游戏' "> 游戏 </p> <p v-else> 睡觉 </p> <h3> 条件展示 </h3> <p v-show = " showFlag "> 条件展示 </p> -
比较
思考： v-if vs v-show 1. 效果看起来一样 2. why Vue要出两个相似的指令？ v-if控制的是元素的存在与否 v-show控制的是元素的display:none属性 思考？ 如果出事条件为假时？ v-if v-show 谁的性能损耗较高？ v-show 总结： 项目中如何选择哪一个？ 频繁切换用 v-show 如果不是很频繁的切换，那我们用 v-if
v-for
- 列表渲染
<h3> 数组 </h3> <ul> <li v-for = "(item,index) in arr" :key = " index "> -- index </li> </ul> <h3> 对象 </h3> <ul> <li v-for = "(item,key,index) of obj" :key = "index"> -- -- </li> </ul> <h3> json </h3> <ul> <li v-for = "item in json" :key = "item.id"> <span> 商品名称： </span> <span> 商品价格： </span> </li> </ul> <h3> 循环嵌套 </h3> <ul> <li v-for = "item in lists" :key = "item.id"> <h3> 商品类型： </h3> <ul> <li v-for = "item in item.type" :key = "item.id"> <p> 制造商： </p> </li> <!-- <li v-for = "ele in item.type" :key = "ele.id"> <p> 制造商： </p> </li> --> </ul> </li> </ul> <h3> 循环number / string </h3> <p v-for = "item in 10"> </p> <p v-for = "item in 'abc'"> </p> - 总结：
- 列表渲染参数可以写三个，分别为 item key index
- 列表渲染，要在渲染的元素身上加一个key，作为这个元素唯一的标识 ,
- 思考: 这是为什么？
- 这个key最好是id,因为id唯一？思考： 为什么不能是index
- 循环嵌套式，参数名称是可以一致的
- in / of 都可以使用
v-on
- 事件处理器
<body> <div id="app"> <button v-on:click = "handler"> 事件一 </button> <button @click = "handler"> 事件 - 简写 </button> <button @click = "eventHandler"> 事件对象 </button> <input type="text" v-model = "n"> <br> <input type="text" v-model = "m"> <button @click = "arguHandler( n,m )"> 事件参数 </button> <!-- 我希望我的一个方法的参数既有事件对象，又有普通参数 --> <button @click = "arguEventHandler( n,$event )"> 事件参数里面有时间对象 </button> <!-- 事件修饰符 --> <div class="big" @click.self = "bigHandler"> <div class="middle" @click.self = "middleHandler"> <div class="small" @click.self = "smallHandler"></div> </div> </div> <!-- 按键修饰符 --> <input type="text" @keyup.enter = "getInputVal"> <input type="text" @keyup.13 = "getInputVal"> <!-- 自定义事件 --> <button @click = "myEvent"> 自定义事件 </button> </div> </body> <script src="../../lib/vue.js"></script> <script> /* 什么是事件修饰符？ * 事件修饰符是用来修饰事件的，它的作用是更加便捷的来使用一些重复的代码,比如时间冒泡的阻止 什么是按键修饰符 * 是用来修饰键盘事件的 回车事件 \ 扩展： 自定义事件 - node.js的events模块 事件的发布 $on 发布【 声明一个事件 】 事件的订阅 $emit 订阅【 触发一个事件 】 */ var vm = new Vue({ el: '#app', data: { n: 0, m: 0 }, methods: { myEvent () { vm.$emit('aa',20000) }, handler () { console.log(' 事件 ') }, eventHandler ( e ) { console.log("兵哥: eventHandler -> e", e.clientX) }, arguHandler ( a,b ) { console.log( a + b ) }, arguEventHandler ( num,e ) { console.log("兵哥: arguEventHandler -> e", e) console.log("兵哥: arguEventHandler -> num", num) }, bigHandler ( e ) { // e.stopPropagation() alert('big') }, middleHandler ( e ) { // e.stopPropagation() alert('middle') }, smallHandler ( e ) { // e.stopPropagation() alert('small') }, getInputVal ( e ) { // if ( e.keyCode == 13 ) { console.log( e.target.value ) // } } } }) console.log('===================================='); // 事件的发布 // vm.$on( 事件名称，事件处理程序 ) vm.$on('aa',function ( val ) { console.log( 'aa' + val ) }) // vm.$emit(事件名称，事件参数) // vm.$emit( 'aa',100 ) console.log('===================================='); </script> - key的重要性
给列表渲染的每一层Vdom添加一个唯一标识，以便diff算法进行同层级比较 扩展： 理解key
表单控件绑定
- v-model
- 双向数据绑定
- VM 改变 V随之改变
- V改变， VM也随之改变
- v-model只用于表单
- 理由： v-model默认绑定value属性
- 技巧： 看到表单直接 v-model
v-pre
- 不需要表达式
- 用法：
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。 - 示例：
<span v-pre>{{ this will not be compiled }}</span>
v-cloak
- 不需要表达式
- 用法：
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 - 示例：
[v-cloak] { display: none; }<div v-cloak> {{ message }} </div>
不会显示，直到编译结束。
v-once
- 不需要表达式
- 用法：
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。<!-- 单个元素 --> <span v-once>This will never change: {{msg}}</span> <!-- 有子元素 --> <div v-once> <h1>comment</h1> <p>{{msg}}</p> </div> <!-- 组件 --> <my-component v-once :comment="msg"></my-component> <!-- `v-for` 指令--> <ul> <li v-for="i in list" v-once>{{i}}</li> </ul>
自定义指令
<body>
<div id="app">
<!-- <input type="text" v-focus.stop = "info"> -->
<input type="text" v-my-focus >
</div>
<div id="root">
<!-- <input type="text" v-focus.stop = "info"> -->
<input type="text" v-my-focus>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
/*
自定义指令有两种定义形式
1. 全局定义
2. 局部定义
*/
// Vue.directive( 指令名称, 指令的配置选项 )
// /* v-focus */
// Vue.directive('focus',{
// /* 每一个选项中都有四个参数 */
// bind: function () { //当指令绑定到dom元素时触发
// console.log('bind')
// },
// inserted: function ( el,b,c,d ) {// 当指令绑定的dom元素插入页面时触发
// console.log("兵哥: el", el) //这个就是指令绑定的dom
// el.focus()
// // el.style.background = 'red'
// console.log("兵哥: b", b)
// if ( b.modifiers.stop ) {
// //true
// el.style.background = 'green'
// } else {
// //false
// el.style.background = 'red'
// }
// el.value = b.expression
// console.log("兵哥: c - vNode", c)
// console.log("兵哥: d - oldVNode", d)
// }
// })
new Vue({
el: '#app',
data: {
info: '焦点'
},
directives: {
// 指令名称：选项
'my-focus': {
inserted: function ( el ) {
el.focus()
}
}
}
})
new Vue({
el: '#root'
})
</script>
191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
