Vue-2
vue 的模板语法
-
mustache语法/双大括号语法
-
支持:
<!-- HTML代码 --> <div id="app"> <p>{{ str }} </p><!--str --> <p>{{ num }} </p><!--100 --> <p>{{ bool?'true':'false' }} </p><!--true --> <p>{{ bool&&'true'||'false' }} </p><!--三目运算符的另一种高级写法,输出:true --> <p>{{ nul&&'null'||'unnull' }} </p><!--null --> <p>{{ und && 'undefined' || '520' }} </p><!--520 --> <p>{{ arr[0] }} </p><!--1 --> <p>{{ obj.name }} </p><!--yyb --> <p>{{ console.log( '1902' ) }} </p><!--会报错 --> <p>{{ alert( 'hello world' ) }} </p><!--会报错 --> <p>{{ (function(){ return 'hello world'})()}} </p><!--hello world --> <p>{{ msg.split('').reverse().join('') }} </p><!--sj.euv olleh -->//javascript代码 new Vue({ el: '#app', data: { msg: 'hello vue.js', str: 'str', num: 100, bool: true, nul: null, und: undefined, arr: [ 1,2,3,4 ], obj: { name: 'yyb' } } })由上可以得出结论:模板语法的支持性很高,但不支持console.log及alert输出
-
指令:
-
基本写法:
v-xxx = "mustache语法2."v-xxx = "msg" -
v-html和v-text:<!-- HTML代码 --> <p v-html="a"></p> <p v-text="a"></p>//javascript代码 new Vue({ el: "#app", data: { a: "<i>hello word<i>" } })结果:
![Sample Pic][v-html_text]
由此可见:v-html(容易引起xss攻击)可以转义HTML标签,而v-text则不能 -
v-bind单项数据绑定<!-- HTML代码 --> <div id="app"> <input type="text" :value="msg"> <img :src="url"> </div>//javascript代码 new Vue({ el: "#app", data: { msg: "hello word", url: "https://p9.pstatp.com/thumb/1233000227244b64ad65" } })结果:
![Sample Pic][v-bind]
注:v-bind可缩写为: -
class同样的v-bind:class简写为:class,有两种写法(对象/数组),此处只介绍数组形式<!-- HTML代码 --> <div id="app"> <div :class="[box,bd]"></div> </div>/* css代码 */ .box { width: 200px; height: 200px; background: #ec5353; } .box-border { border: 2px solid rgb(31, 189, 25); }//javascript代码 new Vue({ el: '#app', data: { box: "box", bd: "box-border" } })结果:
![Sample Pic][class] -
style:同样的,有两种写法(对象/数组),此处介绍数组;<!-- HTML代码 --> <div id="app"> <div :style="[style,bd]"></div> </div>//javascript代码 new Vue({ el: '#app', data: { style: { width: '100px', height: '100px', background: 'blue' }, bd: { border: '2px solid red' } } })结果:
![Sample Pic][style]
-
-
条件渲染:
v-if&v-showv-if用于条件性地渲染一块内容
-
<!-- HTML代码 --> <div id="app"> <p v-if="flag_f">hello vue</p> <p v-if="flag_T">hello world</p> <p v-if="num === 1">1</p> <p v-else-if="num === 2">2</p> <p v-else>3</p> </div> <!-- 页面只会渲染出 hello world 和 1--> <!-- 若再加下面一行代码,会将 hello vue 输出,若将num:1改为num:3,则会输出3 <p v-else>hello vue</p> -->
注://javascript代码 new Vue({ el: "#app", data: { flag_T: false, flag_T: true, num:1 } })- v-if 如果值为false，那么绑定的DOM就会被销毁,这个DOM元素是不会渲染的
- v-if 操作的是一个DOM的生成和销毁
v-show:只是简单的操作DOM的display属性<div id="app"> <p v-show="flag">hello vue</p> </div>new Vue({ el: "#app", data: { flag: true, } })v-if和v-show的区别:- v-if是惰性的,如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
- v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换
- 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
-
列表渲染
v-for- 写法:
v-for = "xxx in(of) data"v-for = "(xxx,xxx) in data "
- 例:
-
数字类型:
<!-- HTML代码 --> <div id="app"> <ul> <li v-for=" n in num "> {{ n }} </li> </ul> </div>//javascript代码 new Vue({ el: "#app", data: { num: 10, } })结果:
![Sample Pic][v-for_num] -
字符串类型:
<!-- HTML代码 其余同上--> <li v-for=" n in string">{{n}}</li>//javascript代码 其余同上 data: { string: 'afgdgh', }结果:
![Sample Pic][v-for_string] -
数组类型:
<!-- HTML代码 当然也可支持下标index--> <li v-for=" n in arr">{{n}}</li>data{ arr:[1,'li',5,6] }结果:
![Sample Pic][v-for_arr] -
对象类型:
<!-- HTML代码 也支持下标index,同时写3个参数--> <li v-for="(key,n) in obj"> <span>{{key}}</span>: <span>{{n}}</span> </li>//javascript代码 data: { obj: { name: 'zhangsan', age: 18 }, }结果:
![Sample Pic][v-for_obj] -
JSON类型:
<!-- HTML代码 --> <li v-for="(ite,index) in json"> <span>{{ite}}</span>:<span>{{index}}</span> </li> <!-- 当然也可以再嵌套一层,将其中的每个对象渲染 -->new Vue({ el: "#app", data: { json: [ 'vue', { id: 1, name: 'zhangsan' }, { id: 2, name: 'lisi' } ] } })结果:
![Sample Pic][v-for_json-a]
-
- 写法:
Vue中的事件
事件: 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。可缩写为@
-
普通事件:
<!-- HTML代码 --> <div id="app"> <button @click="A">1</button> <p>{{msg}}</P> </div>//javascript代码 //每次点击按钮,p标签中的数字都会+1 new Vue({ el: "#app", data:{ msg:0 } methods: { A() { this.msg++ } }, }) -
事件对象(不详细介绍)
-
事件传参
<!-- HTML代码 若需要访问原始的DOM对象,可以将$event传入方法--> <div id="app"> <button @click="event(a,b)">1</button> </div>//javascript代码 new Vue({ el: "#app", data: { a: 20, b: 20 }, methods: { event(a, b) { console.log(a + b) } }, }) //点击button控制台会输出40 -
事件修饰符
- 举例说明:事件冒泡
- 首先引入
<div id="app"> <div class="a" @click="a"> <div class="b" @click="b"> <div class="c" @click="c"></div> </div> </div> </div>
先预览下结果:.a { width: 500px; height: 500px; background: red; } .b { width: 350px; height: 350px; background: blue; } .c { width: 200px; height: 200px; background: yellow; }
![Sample Pic][click_bubble]new Vue({ el: "#app", data: {}, methods: { a(e) { alert('a') }, b(e) { alert('b') }, c(e) { alert('c') } } })- 当点击a(黄色)方块时,应当弹出"a",但由于事件冒泡,导致页面弹出"c" "b" "a",若要解决此问题,可以给每个方法都添加一个:e.stopPropagation(),这样写显然造成代码冗余,所以使用下面的方法:
同理,其他的事件方法也可以,此处不再一一举例<!-- HTML代码 --> <!-- 为每个方法绑定一个.stop就可以完美解决了 --> <div id="app"> <div class="a" @click.stop="a"> <div class="b" @click.stop="b"> <div class="c" @click.stop="c"></div> </div> </div> </div>
- 举例说明:事件冒泡
-
键码修饰符:
- 举例说明:按下相应的键,获取输入的值
<!-- HTML代码 --> <div id="app"> <input type="text" @keyup=get_data> </div>
显然:上方的写法过于复杂,那么就使用下面的按键修饰符://javascript代码 new Vue({ el: "#app", methods: { get_data(e) { if (e.keyCode == 13) { console.log(e.target.value)//按下Enter键,控制台打印输入的值 } } } })<!-- HTML代码 --> <div id="app"> <input type="text" @keyup.enter=get_data><!--按下Enter键,打印输入值 --> <input type="text" @keyup.13=get_data><!--按下Enter键,打印输入值 --> <input type="text" @keyup.a=get_data><!--按下'a'键,打印输入值 --> </div>
由上方的结果可以看出,按键修饰符极为简洁,既支持键码,又支持键盘字母,优势明显//javascript代码 new Vue({ el: "#app", methods: { get_data(e) { console.log(e.target.value) } } })
注:此处只举例说明,若要了解更多的事件修饰符,请移步至Vue的官网https://cn.vuejs.org/v2/guide/events.html
- 举例说明:按下相应的键,获取输入的值
