1. vue基本操作
①展示数据（hello world）
<script type="text/javascript">
onload = function() {
var vue = new Vue({ 传入一个json对象 开启MVVM中的VM
el: "#box", 选择器
data: {
msg: "hello world"
}
});
}·
</script>
<div id="box">{{msg}}</div> 使用{{ }}获取vue中的数据，与angular相同
②常用指令
（1）v-model 一般用于表单（input） 双向数据绑定
<div id="box">
<input type="text" v-model="msg"> 与angular相同用法
<br>
{{msg}}
</div>
（2）v-for 循环渲染数据
onload = function() {
var vue = new Vue({
el: "#box",
data: {
arr: ["apple", "pear", "banana", "orange"],
json:{a:"apple",b: "pear", c:"banana",d: "orange"}
}
});
}
<div id="box">
<ul> 循环数组
<li v-for="value in arr">{{value}} {{$index}} </li> {{$index}}是索引
</ul>
<ul > 循环json对象
<li v-for="(k,v) in json">{{k}} {{v}}</li> k就是key , v是value
</ul>
</div>
（3）v-on 添加事件
onload = function() {
var vue = new Vue({
el: "#box",
methods: { 使用methods添加事件
show() { 此处使用ES6写法，vue支持ES6写法
alert("hello")
}
}
});
}
onload = function() {
var vue = new Vue({
el: "#box",
data:{
arr:["apple","pear","orange"]
},
methods: { 使用methods添加事件
show() { 此处使用ES6写法，vue支持ES6写法
console.log(this.arr) ------ ["apple", "pear", "orange", __ob__: Observer]
此处的this指向new Vue( )这个对象
}
}
});
}
<input type="button" value="按钮" v-on:click="show()"> 添加点击事件
（4）v-show 显示隐藏
v-show = “true/false” 通过这个指令可以显示或隐藏元素
（5）事件的简写：使用@替代v-on:，事件对象：$event
onload = function() {
var vue = new Vue({
el: "#box",
methods: {
show(eve) {
alert(eve.clientX) 可以获取到事件对象中的属性值
}
}
});
}
<div id="box">
<input type="button" value="按钮" @click="show($event)"> 简写形式
</div>
a ) 阻止冒泡与阻止默认行为：
onload = function() {
var vue = new Vue({
el: "#box",
methods: {
show(eve) {
alert(eve.clientX);
// eve.cancelBubble = true; 通过添加原生方法可以阻止冒泡
},
show2() {
alert("这是冒泡")
},
show3(eve) {
// eve.preventDefault(); 阻止默认行为的原生写法
}
}
});
}
<div id="box">
<div @click="show2()">
<input type="button" value="按钮" @click.stop="show($event)">
或者添加vue提供的stop方法阻止冒泡
<input type="button" value="按钮2" @contextmenu.prevent="show3($event)">
通过contextmenu方法阻止默认行为，prevent是vue提供的方法
</div>
</div>
b ) 键盘事件：
methods: {
keyEvent(eve) {
alert("点击键盘了");
eve.keyCode 使用原生写法
}
}
<input type="text" @keydown.enter="keyEvent()"> 使用enter、left等可以实现
<input type="text" @keydown.13="keyEvent()"> 直接使用键盘码也可以实现
（6）属性设置：v-bind
onload = function() {
new Vue({
el: "#box",
data: {
url: "//www.baidu.com/img/bd_logo1.png",
w: "100px"
}
});
}
<div id="box">
<img v-bind:src="url" alt=""> 设置img标签的src属性
<img :src="url" alt="" :width="w"> 直接使用:简写形式也可，能设置多个属性
</div>
a ) 添加类名：
<style>
.red { color: red;}
.blue { }
</style>
onload = function() {
new Vue({
el: "#box",
data: {
redData:"red", 在data中传递设置的类名
blueData:"blue",
a:true
}
});
}
<div id="box">
<div :class="[redData,blueData]">文字</div> 以数组形式传递data中的参数
<div :class="{red:a,blue:false}">文字</div>
也可传入一个对象，直接写类名，以boolean值控制样式，支持传递参数
</div>
b ) 添加style属性：
data: {
a: {
color: 'red',
backgroundColor: 'grey' 必须使用驼峰命名法
}
}
<div id="box">
<div :style="a">这是一段文字</div>
</div>
（7）模板使用
onload = function() {
new Vue({
el: "#box",
data: {
msg:"",
rawHtml:"<h2>这是html</h2>"
}
});
}
<div id="box">
<input type="text" v-model="msg"><br> 双向数据绑定
{{msg}}<br> 直接渲染数据
<div v-once>{{msg}}</div><br> 数据只渲染一次，上述已经渲染，此处不渲染
<div v-html="rawHtml"></div> 将内容以html的形式渲染到页面上
</div>
a ) 使用过滤器：
new Vue({
filters: {
capitalize: function(value) { 直接设置过滤方法
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
});
{{'welcome'|capitalize}} 添加过滤效果
支持追加过滤器的写法：{{ message | filterA | filterB }}
（8）生命周期
a ) 生命周期图示：
（9）防止闪烁
v-text v-cloak v-html
<span>{{msg}}</span> 这种写法在网速慢时会出现{{msg}}的闪烁
<span v-text="msg"></span> 这种写法不会出现闪烁
（10）计算属性computed
new Vue({
el: "#box",
data: {
msg: "Welcome"
},
computed: {
abc: function() { 设置计算属性的值，即是函数的返回值
return 2;
}
}
})
<div id="box">
<span>{{abc}}</span>
<span v-text="msg"></span>
</div>
a ) 完整的计算属性用法：
var vm = new Vue({
el: "#box",
computed: {
abc: {
get: function() { 上述的简写方法，就是默认的get函数方法
return 5; 此时abc即是函数返回值
},
set: function(val) {
当abc的属性值发生变化时，默认进入这个方法，参数val就是改变后的值
alert(val)
}
}
}
})
document.onclick = function() {
vm.abc = 10 改变计算属性的值
}
（11）实例对象的属性
var vm = new Vue({
aa:123, 自定义属性
el: "#box",
data: { a:1 }
})
console.log(vm.$el) ------ #box这个DOM元素
console.log(vm.$data) ------ vue中的data对象
console.log(vm.$mount) ------ 手动挂载vue程序
console.log(vm.$options.aa) ------ 获取自定义属性
console.log(vm.$destroy) ------ 销毁对象
console.log(vm.$log()) ------ 查看当前数据的状态
a ) 监听数据$watch：
data: {
json: {
name: "Tom",
age: 18
}
}
vm.$watch('json', function() {
alert('发生变化了')
}, {deep: true}) 由于是json数据，所以需要传入这个参数表示深度监听
document.onclick = function() {
vm.json.name = "Jack"
}
（12）自定义指令
a ) 设置一个拖拽事件的自定义指令：
Vue.directive('drag', {
bind: function(el) { 此处传递的el即是绑定了v-drag标签的元素
el.onmousedown = function(ev) {
var disX = ev.clientX - el.offsetLeft;
var disY = ev.clientY - el.offsetTop;
document.onmousemove = function(ev) {
var l = ev.clientX - disX;
var t = ev.clientY - disY;
el.style.left = l + "px";
el.style.top = t + "px";
}
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
}
}
})
<div id="box">
<div v-drag :style="{'100px',height:'100px',backgroundColor:'blue',position:'absolute',right:0,left:0}"></div>
</div>
a ) 自定义键盘指令：
Vue.config.keyCodes.a = 65; 将a的键盘码设置为65,
<div id="box">
<input type="text" @keydown.65="show()">
<input type="text" @keydown.a="show()"> 通过上述设置，此处也可触发函数
<input type="text" @keydown.ctrl="show()">
</div>
（13）设置动画效果
new Vue({
el: "#box",
data: {
bSign: false,
},
methods: {
toggle() {
this.bSign = !this.bSign
}
}
})
<style>
#div1 {
100px;
height: 100px;
}
.fade-enter {
opacity: 0
}
.fade-enter-active {
transition: .5s
}
.fade-leave-active {
transition: .5s;
opacity: 0
}
</style>
<div id="box">
<input type="button" value="按钮" @click="toggle()">
<transition name="fade">
<div id="div1" v-show="bSign"></div>
</transition>
</div>
a ) 引入animation插件自定义类名：
<link rel="stylesheet" href="vuecss/animate.css">
<div id="box">
<input type="button" value="按钮" @click="toggle()">
<transition name="custom-classes-transition" enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<div class="animated" id="div1" v-show="bSign"></div>
</transition>
</div>
③ vue组件
（1）全局组件：
Vue.component('my-component', { 定义一个组件
template: '<span>{{ message }}</span>',
data() { 定义动态数据必须使用data的函数返回值形式
return {
message: 'hello'
}
}
});
new Vue({
el: "#box"
})
<div id="box">
<my-component></my-component> 以组件中template内容替换
</div>
（2）局部组件：
var child = { 设置一个组件对象
template: '<span>{{ message }}</span>',
data() {
return {
message: 'hello'
}
}
};
new Vue({
el: "#box",
components: { 设置局部组件对象
'my-component': child 传入设置的组件对象
}
})
<div id="box">
<my-component></my-component>
</div>
（3）使用template标签替换script标签创建模板：
<script type="text/template" id="temp1">
<span>{{ message }}</span>
</script>
<template id="temp2"> template是2013年推出的标签
<span>{{ message }}</span>
</template>
<script>
var child = {
template: '#temp2',
data() {
return {
message: 'hello'
}
}
};
（4）模板卡槽slot的使用：
new Vue({
el: "#box",
components: {
'aa': {
data() {
return {
msg: 'content'
}
},
template: "#temp"
}
}
})
<div id="box">
<aa>
<h3 slot="header">这是一个h3的header</h3>
<h3 slot="footer">这是一个h3的footer</h3>
</aa>
</div>
<template id="temp">
<div class="container"> 必须设置一个根容器才能生效
<header>
<slot name="header"></slot> 带有slot="header"属性的标签替换此slot
<p>{{msg}}</p>
</header>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
最后页面上的渲染结果为：
<div id="box">
<div class="container">
<header>
<h3>这是一个h3的header</h3>
<p>content</p>
</header>
<footer>
<h3>这是一个h3的footer</h3>
</footer>
</div>
</div>
（5）vue-router组件
a ) 一个基本的路由：
<div id="app">
<ul>
<li>
<router-link to="/home">主页</router-link>
</li>
<li>
<router-link to="/news">新闻</router-link>
</li>
</ul>
<div>
<router-view></router-view> 固定写法，此处渲染模板中内容
</div>
</div>
<script type="text/javascript" src="vuejs/vue-router.js"></script> 引入路由组件
var router = new VueRouter({
routes: [{ 设置路由规则
path: '/home', 设置跳转路径
component: {
template: '<h3>这是主页</h3>' 设置模板，也可引入其他页面
}
}, {
path: '/news',
component: {
template: ' <h3>这是新闻</h3>'
}
}]
});
// 启动路由
const app = new Vue({
el: "#app",
router
})
b ) 路由的嵌套：
<div id="app">
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
<div>
<router-view></router-view>
</div>
</div>
<template id="home">
<div> 因为只能有一个根目录，必须使用标签包裹模板内容
<h3>这是主页</h3>
<router-link to="/home/login">登录</router-link>
<router-link to="/home/reg">注册</router-link>
<div>
<router-view></router-view>
</div>
</div>
</template>
<template id="news">
<div>
<h3>这是新闻</h3>
<router-link to="/news/detail/001">新闻001</router-link>
<router-link to="/news/detail/002">新闻002</router-link>
<div>
<router-view></router-view>
</div>
</div>
</template>
<template id="detail">
<div>
{{$route.params}} 可以获取到url中设置的id的参数
{{$route.path}} 获取当前的url路径
{{$route.query}} 获取url中传递的参数值，json形式
</div>
</template>
var router = new VueRouter({
routes: [{
path: '/',
redirect: '/home' 指定’/’跳转到’/home’
}, {
path: '/home',
component: {
template: '#home'
},
children: [{ 设置子路由，以对象元素的数组形式设置
path: '/home/login',
component: {
template: '<strong>登录页面</strong>'
}
}, {
path: '/home/reg',
component: {
template: '<strong>注册页面</strong>'
}
}]
}, {
path: '/news',
component: {
template: '#news'
},
children: [{
path: '/news/detail/:id', 可以设置带参数的锚点值，通过$route.params获取
component: {
template: '#detail'
}
}]
}]
});
const app = new Vue({
el: "#app",
router
}