Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
一、引入Vue
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="[i]https[/i]://v2.cn.vuejs.org/js/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="[i]https[/i]://v2.cn.vuejs.org/js/vue.min.js"></script>二、Vue实例创建
<script>
var vm = new Vue({
el: string, //实例的挂载目标
data: Object, //用户属性
computed: {[key: string]: Function | {get: Function, set: Function}}, //用户属性，可设置只读、可读写
methods: {[key: string]: Function}, //用户方法
watch: {[key: string]: string | Function | Object | Array} //监听用户属性值变化
})
</script>Vue实例属性其实有两类，为了便于称呼，我想了两个名称：固有属性和用户属性，举个例子说明：
<script>
var vm = new Vue({
el: '#example',
data: {
name: '木子屋'
}
})
</script>el和data是Vue实例固有的属性，需在名称前加$才能访问它们，例如vm.$el，vm.$data，我称为固有属性；name是用户添加的属性，可直接访问，例如vm.name，我称为用户属性。Vue实例方法也是一样的，有固有方法和用户方法，下边我都这么称呼它们。更多Vue实例属性和方法详见《Vue API文档》。
注意：Vue使用$前缀暴露自己的内置API，它还为固有属性保留_前缀，所以应该避免用户属性名称使用这两个字符开头。
三、Vue数据绑定
<div id="example">
<a v-bind:href="url">{{name}}</a>
<!-- v-bind缩写 -->
<a :href="url">{{name}}</a>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
url: '[i]http[/i]://www.mzwu.com/',
name: '木子屋'
}
})
</script>HTML属性使用v-bind指令和用户属性绑定，文本使用Mustache语法(双大括号)和用户属性绑定，创建Vue实例时自动赋值，Vue最大的特性是当修改用户属性值时，HTML也能同步更新，我们不再和HTML直接交互了，例如：
vm.url = "[i]http[/i]://example1.mzwu.com/";
vm.$data.url = "[i]http[/i]://example2.mzwu.com/";使用v-model指令实现双向绑定：
<div id="example">
<p>{{message}}</p>
<input v-model="message">
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello Vue!'
}
})
</script>四、Vue语句
1.判断语句：
<div id="example">
<a v-show="show">click me</a>
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>Not A/B</div>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
show: false,
type: 'C'
}
})
</script>v-show指令和v-if指令效果基本一样，不同的是带有v-show指令的元素始终会被渲染并保留在DOM中，v-show只是简单地切换元素的CSS display属性。
2.循环语句：
<ul id="example">
<li v-for="item in items" :key="item">
{{item}}
</li>
</ul>
<script>
var vm = new Vue({
el: '#example',
data: {
items: ['Foo', 'Bar']
}
})
</script>五、Vue事件监听
<div id="example">
<button v-on:click="todo">click me</button>
<!-- v-bind缩写 -->
<button @click="todo">click me</button>
</div>
<script>
var vm = new Vue({
el: '#example',
methods: {
todo: function(){alert('Hello Vue!');}
}
})
</script>事件修饰符：
<!-- 事件修饰符 .stop,.prevent,.capture,.self,.once,.passive -->
<a v-on:click.prevent="doThis">click me</a>
<!-- 按键修饰符 .enter,.tab,.delete,.esc,.space,.up,.down,.left,.right -->
<input v-on:keyup.enter="todo">
<!-- 系统键修饰符v2.1+ .ctrl,.alt,.shift,.meta -->
<div v-on:click.ctrl="todo">click me</div>
<!-- 鼠标按钮修饰符v2.2+ .left,.right,.middle -->
<div v-on:mousedown.left="todo">click me</div>参考资料
[1].Vue官网：https://cn.vuejs.org/
[2].Vue文档：https://cn.vuejs.org/v2/guide/
[3].Vue API：https://cn.vuejs.org/v2/api/
评论（0）
暂无评论。