1. 使用Vue
<!-- 将来new的Vue实例,会控制这个元素中的所有内容 --> <!-- Vue 实例所控制的这个元素区域,就是我们的V --> <div id="app"> <h1>{{msg1}}</h1> <h1>{{msg2}}</h1> </div> <!-- 1.导入Vue --> <script src="vue.js"></script> <script> // 2. 创建一个Vue的实例 // 当我们导入包之后,在浏览器的内存中,就多了一个Vue构造函数 var app = new Vue({ el: '#app', // 表示,当我们new的这个vue实例,要控制页面上的哪个区域 data:{ // data 属性中,存放的是el 中药用到的数据 msg1: 'Hello Word!', // 通过vue提供的指令,很方便的就能把数据渲染到页面上,程序员不再手动操作DOM元素了,[前端的vue之类的框架,不提倡我们去手动操作DOM元素了] msg2: '123' } }) </script>
2. v-cloak v-text v-html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> [v-cloak]{ display: none; } </style> </head> <body> <div id="app"> <!-- 使用v-cloak能够解决插值表达式闪烁的问题 --> <p v-cloak>{{msg}}</p> <h4 v-text="msg">456</h4> <!-- 默认 v-text 是没有闪烁问题 --> <!-- v-text 会覆盖元素中原本的内容, 但是插值表达式只会替换自己的这个占位符, 不会把整个元素内容清空 --> <div>{{msg1}}</div> <div v-text="msg1"></div> <div v-html="msg1">456</div> <!-- 同v-text但是会解析html标签 --> </div> <script src="vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: '#app', data: { msg: 123, msg1: '<h2>123</h2>' } }) </script> </body> </html>
3. v-bind
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .thin { font-weight: 200; } .italic { font-style: italic; } .active { letter-spacing: 0.5em; } </style> </head> <body> <div id="app"> <!-- v-bind: 是vue中, 提供的用于绑定属性的指令 --> <!-- v-binf 只能实现数据的单向绑定, 从M自动绑定到V --> <span v-bind:title="msg">123</span><br> <!-- v-bind: 指令可以简写为 :要绑定的属性 --> <!-- v-bind 中可以卸荷阀的额Js表达式 --> <span :title="msg">456</span><br> <!-- v-bind操作class --> <!-- 第一种使用方式,直接传递一个数组 --> <h1 :class="['thin', 'italic', 'active']">这是一个大宝贝</h1> <!-- 在数组中使用三元表达式 --> <h1 :class="['thin', 'italic', flag?'active':'']">这是一个大宝贝</h1> <!-- 在数组中使用对象来代替三元表达式, 提高代码的可读性 --> <h1 :class="['thin', 'italic', {'active':true}]">这是一个大宝贝</h1> <!-- 绑定对象时,对象的属性是类名,可以带引号,也可以不带引号 --> <h1 :class="{thin: true, italic: true, active: false}">这是一个大宝贝</h1> <!-- 属性值 是一个标识符 --> <h1 :class="objClass">这是一个大宝贝</h1> <!-- v-bind操作style --> <!-- v-bind直接在元素上通过:style形式书写样式 --> <h1 :style="{color:'red', fontSize:'40px', 'font-weight':'200', 'backgroundColor':'blue'}">这是一个大宝贝</h1> <!-- v-bind将样式写进data中 --> <h1 :style=hlStyleObj>这是一个大宝贝</h1> <!-- v-bind绑定多个样式 --> <h1 :style="[hlStyleObj, hlStyleObj1]">这是一个大宝贝</h1> </div> <script src="vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var app = new Vue({ el:'#app', data: { msg: 123, flag: false, objClass:{thin: true, italic: true, active: false}, hlStyleObj:{color:'red', fontSize:'40px', 'font-weight':'200', 'backgroundColor':'blue'}, hlStyleObj1: {fontStyle: 'italic'} }, methods:{} }) </script> </body> </html>
4. v-on
<div id="app"> <p>{{ msg }}</p> <!-- v-on vue中提供的事件绑定机制 --> <button v-on:click="reverseMessage">点击</button> <!-- 可以使用@简写 -->
<!-- 如果在函数名后加了()则可以为函数传参 --> <button @click="go">{{ msg1 }}</button> </div> <script src="vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { msg: 'Hello Word 123 456', msg1: '大大', msg: 'alert(123)' }, methods:{ // 普通方法 reverseMessage:function(){ this.msg = this.msg.split(' ').reverse().join(' ') }, // 简写方法 go(){ this.msg1 = 'adasasd' } } }) </script>
5 时间修饰符 .stop .once .prevent .self .capture
<div id="app"> <div class="inner" @click="fun1"> <!-- 冒泡效果先打印fun2在打印fun1 --> <!-- .stop可以解决冒泡效果 --> <input type="submit" @click.stop="fun2" value="12"> <!-- .prevent可以阻止默认行为 --> <a href="http://www.baidu.com" @click.stop.prevent="fun3">百度</a> </div> <!-- .capture 实现捕获触发事件的机制 --> <div class="inner" @click.capture="fun1"> <input type="submit" @click="fun2" value="12"> </div> <!-- .self 只有点击当前元素才会触发 只会阻止自己身上的冒泡行为的触发, 并不会真正阻止冒泡行为 --> <div class="inner" @click.self="fun1"> <input type="submit" @click="fun2" value="12"> </div> <!-- .once 只会触发一次 --> <div class="inner" @click.once="fun1"> <input type="submit" @click="fun2" value="12"> </div> </div> <script src="vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: '#app', methods: { fun1(){ console.log('fun1') }, fun2(){ console.log('fun2') }, fun3(){ console.log('fun3') } } }) </script>
6 v-model 实现双向绑定
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <!-- 使用 v-model 指令, 可以实现表单元素和Model中数据的双向绑定 --> <!-- v-model 只能运用在表单元素中 --> <!-- input(radio, text, address, email...) select checkbox textarea --> 姓: <input type="text" v-model='first_name'> 名: <input type="text" v-model='last_name'> <p>{{full_name}}</p> </div> <script src="vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { first_name: '', last_name: '' }, computed:{ full_name: function(){ return this.first_name + this.last_name } } }) </script> </body> </html>
7 v-for
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <!-- 循环一个列表 --> <p v-for="ls in lst"> {{ls}} </p> <!-- 循环列表第二个参数为索引 --> <p v-for="(ls, i) in lst"> 索引:{{i}}-- 值:{{ls}} </p> <!-- 循环一个列表套对象可以通过点的方式取值 --> <p v-for="ls in dic"> {{ls.id}}{{ls.name}} </p> <!-- 循环一个列表套对象第二个参数为索引 --> <p v-for="(ls, i) in dic"> {{ls.id}}{{ls.name}} {{i}} </p> <!-- 循环一个对象 第一个 值 第二个 key 第三个 索引 --> <p v-for="(val, key, i) in user">{{val}} {{key}} {{i}}</p> <!-- 循环一个数字 --> <p v-for="count in 10"> {{count}} </p> </div> <script src="vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: '#app', data: { lst: [1,2,3,4,5,6,7], dic: [ {id: 1, name: 'yy1'}, {id: 2, name: 'yy2'}, {id: 3, name: 'yy3'}, {id: 4, name: 'yy4'} ], user: { id: 1, name: 'yyf', age: 18, gender: '男' } } }) </script> </body> </html>
8 v-for :key的使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <label for="">id: <input type="text" v-model="id"> </label> <label>name: <input type="text" v-model="name"> </label> <input type="button" value="提交" @click="go"> <!-- v-for循环时,key属性只能使用namber获取string --> <!-- key在使用时,必须使用v-bind属性绑定的形式指定key --> <!-- 在组件中,使用v-for循环的时候,或在一些特殊情况中,如果v-for有问题, 必须使用v-for的同时指定唯一的 字符串/数字类型 key值 --> <p v-for="ls in lst" :key='ls.id'> <input type="checkbox">{{ls.id}} ==> {{ls.name}}</p> </div> <script src="vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el:'#app', data: { name: '', id: '', lst:[ {id:1, name: '嬴政'}, {id:2, name: '张辽'}, {id:3, name: '刘备'}, {id:4, name: '曹操'}, ] }, methods:{ go(){ let foo = {id: this.id, name: this.name}; this.lst.unshift(foo) } } }); </script> </body> </html>
9 v-if v-show
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <!-- v-if 的特点: 每次都会重新删除或创建元素 --> <!-- v-show 的特点: 每次不会重新进行DOM的删除和创建操作,只能切换了元素的 display:none样式 --> <!-- v-if 有较高的切换性能消耗--> <!-- v-show有较高的初始渲染消耗 --> <!-- 如果元素涉及到频繁的切换,最好不要使用v-if --> <!-- 如果元素可能永远也不会被显示出来被用户看到,则推荐使用v-if --> <p v-show="true">123</p> <p v-show="false">456</p> <p v-if="true">789</p> <p v-if="false">100</p> </div> <script src="vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: '#app', data: { } }) </script> </body> </html>