Vue.js入门
引用vue.js文件
<script src="https://unpkg.com/vue/dist/vue.js"></script>
Vue.js常用指令
- v-if
v-if指令可以根据表达式的值在DOM中生成或移除元素
<div id="xiu">
<p v-if="kang">修抗</p>
</div>
<script>
new Vue({
el: '#xiu',
data: {
kang: true
}
})
</script>
- v-show
v-show指令可以根据表达式的值在DOM中隐藏或显示元素
如果隐藏的话，会在元素中添加一个内联样式：style="display:none"
<div id="xiu">
<p v-show="kang">修抗</p>
</div>
<script>
new Vue({
el: '#xiu',
data: {
kang: false
}
})
</script>
v-show指令有更高的初始渲染消耗，需要频繁切换时使用
v-if指令有更高的切换消耗，运行时条件不太可能改变时使用
- v-else
v-else指令为false时可以显示表达式的值
v-else指令需要和v-if指令一起使用
<div id="xiu">
<P v-if="ok">true</P>
<p v-else="ok">false</p>
</div>
<script>
new Vue({
el: '#xiu',
data: {
ok: false
}
})
</script>
- v-text
v-text指令与{{ }}效果一样
<p v-text="xiu"></p> <p>{{xiu}}</p>
- v-html
v-html指令可以动态渲染任意HTML判断
<div class="xiu" v-html="kang"> </div> <script> new Vue({ el:".xiu", data: { kang:"<h1>标题</h1>" } }) </script>
- v-pre
v-pre指令用来跳过这个元素和它的子元素的编译，直接显示原始的Mustache标签：{{kang}}
<div id="app"> <span v-pre>{{kang}}</span> </div> <script> new Vue({ el:'#app', data:{ kang: 'Hello World!' } }) </script>
- v-cloak
v-cloak指令防止刷新数据之前闪烁{{name}}
<style> [v-cloak] { display: none; } </style> <div id="app" v-cloak > <p>{{name}}</p> </div> <script> new Vue({ el:"#app", data: { name: "修抗" } }) </script>
- v-bind
v-bind指令用于响应式更新HTML特性（v-bind可以默认不写）
<div id="xiu"> <a v-bind:href="url">百度</a><!-- v-bind可以默认不写 --> </div> <script> new Vue({ el: '#xiu', data: { url:"https://www.baidu.com/" } }); </script>
v-bind显示或隐藏多个css属性
第一种方式：
<style> .fontSize { font-size: 20px; } .backgroundColor { background: red; } </style> <div id="box"> <p v-bind:class="[size,color]">文字颜色</p> </div> <script> new Vue({ el: '#box', data: { size: 'fontSize', color: 'backgroundColor' } }); </script>
第二种方式：
<style> .fontSize { font-size: 20px; } .backgroundColor { background: red; } </style> <div id="box"> <p v-bind:class="{fontSize:true,backgroundColor:true}">文字颜色</p> </div> <script> new Vue({ el: '#box' }); </script>
第三种方式：
<style> .fontSize { font-size: 20px; } .backgroundColor { background: red; } </style> <div id="box"> <p v-bind:class="{fontSize:z,backgroundColor:c}">文字颜色</p> </div> <script> new Vue({ el: '#box', data: { z: true, c: true } }); </script>
第四种方式：
<style> .fontSize { font-size: 20px; } .backgroundColor { background: red; } </style> <div id="box"> <p v-bind:class="json">文字颜色</p> </div> <script> new Vue({ el: '#box', data: { json: { fontSize:true, backgroundColor:true } } }); </script>
- v-model
v-model指令用于input、select、text、CheckBox、radio等表单控件元素上创建双向数据绑定
<div id="xiu"> <input type="checkbox" v-model="kang"> </div> <script> new Vue({ el: '#xiu', data: { kang: true } }) </script>
v-model指令的lazy参数（同步输入框的值和数据，lazy可以默认不写）
<div id="xiu"> <input v-model="msg" lazy/> {{msg}} </div> <script> new Vue({ el: '#xiu', data: { msg:'修改文本框的值查看效果' } }) </script>
v-model指令的debounce参数（设置一个最小延迟，比如在input输入内容时随时发送Ajax请求，设置5000毫秒发送一次）
<input v-model="msg" debounce="5000"/>
- v-for
v-for指令语法：xiu : kang （kang是源数据数组，xiu是kang的别名）
方法一：（绑定数据到数组）
<div id="xiu"> <ul> <template v-for="place in places"> <li>{{ place.name }}</li> </template> </ul> </div> <script> new Vue({ el: '#xiu', data: { places: [ { name: '厦门' }, { name: '漳州' }, { name: '福州' } ] } }) </script>
方法二：（通过对象的属性来迭代数据）
value对象的值（必填）
key对象的属性
index对象的索引
<div id="xiu"> <p v-for="(value,key,index) in object"> {{ index }}{{key}}:{{value}} </p> </div> <script> new Vue({ el: '#xiu', data: { object: { name: "修抗", url: "www.xiukang.com", index: "教育" } } }) </script>
方法三：（循环一个整数）
<div id="xiu"> <p v-for="value in 10"> {{value}} </p> </div> <script> new Vue({ el: '#xiu' }) </script>
- v-on
v-on指令用来绑定事件的
绑定事件
<div id="app"> <button v-on:click="onClick">按钮</button> </div> <script> new Vue({ el:"#app", methods: { onClick:function(){ alert(new Date()) } } }) </script>
绑定提交事件
<form id="xiu" v-on:submit="onSubmit"> <input type="text"/> <input type="submit" value="提交"/> </form> <script> new Vue({ el:"#xiu", methods: { onSubmit: function(){ alert("提交事件"); } } }) </script>
el、data、methods、computed、watch介绍
- el
el指Vue实例挂载的元素节点
- data
data值初始化的值
- template
template创建虚拟DOM渲染函数
<div id="app"></div> <script> new Vue({ el: '#app', template: '<p>{{ say }}</p>', data: { say:"修抗" } }) </script>
- methods
methods必须要有一定的触发条件才能执行，如点击事件
<div id="app"> <p>{{ say() }}</p> </div> <script> new Vue({ el: '#app', methods: { say: function () { return '我要成为海贼王' } } }) </script>
- computed
computed是在HTML DOM加载后马上执行的，如赋值
<div id="app"> {{firstName}} · {{secName}} · {{thirdName}} </div> <script> var vm = new Vue({ el: '#app', /* data选项中的数据：firstName，secName,thirdName computed监控的数据：lufei_Name 两者关系： lufei_Name = firstName + secName + thirdName 所以等式右边三个数据任一改变，都会直接修改 lufei_Name */ data: { // 路飞的全名：蒙奇·D·路飞 firstName: '蒙奇', secName: 'D', thirdName: '路飞' }, computed: { luFei_Name: function () { return this.firstName + this.secName + this.thirdName } } }) // 将“路飞”改为“海军王” vm.thirdName = '海军王'</script>
- watch
watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。
<div id="app"> {{haiZeiTuan_Name}} · {{suoLong}} · {{naMei}}· {{xiangJiShi}} </div> <script> var vm = new Vue({ el: '#app', data: { haiZeiTuan_Name: '草帽海贼团', suoLong: '草帽海贼团索隆', naMei: '草帽海贼团娜美', xiangJiShi: '草帽海贼团香吉士' }, watch: { haiZeiTuan_Name: function (newName) { this.suoLong = newName + '索隆' this.naMei = newName + '娜美' this.xiangJiShi = newName + '香吉士' } } }) vm.haiZeiTuan_Name = '橡胶海贼团' </script>
- computed、methods、watch执行顺序
默认加载的时候先computed再watch，不执行methods；
等触发某一事件后，则是：先methods再watch。
- 数组变动检测
push()在最后添加
pop()删除最后一个
shift()删除第一个
unshift()在开头添加
splice()从下标为start开始删除deleteCount个元素，并在该位置添加val，val2
sort()排序
reverse()
<div id="app"> <p>{{xiu}}</p> <button v-on:click="kang">按钮</button> </div> <script> new Vue({ el:"#app", data: { xiu: ["23","1","3","4"] }, methods: { kang:function(){ this.xiu.push("23"); } } }) </script>
- 内置过滤器
- 1.filterBy(0.12版本)
