目录
一、简介
vue是一个构建用户界面的框架、一个轻量级MVVM。官网
二、起步
2.1 下载vue.js
vue2.0和1.0相比，最大的变化就是引入了Virtual DOM(虚拟DOM),页面更新效率更高，速度更快。
cnpm使用
# 查看历史版本
$ cnpm view vue versions
# cd 到对应目录
# 安装最新版vue
$ cnpm install vue
vue使用正式版本vue.min.js。
2.2 安装vue-devtools
方式一：翻墙在chrome拓展程序里寻找安装
方式二：Git 地址下载，解压后拖进chrome拓展程序页面
会在chrome检查中增加vue工具
2.3 Hello world
var vm = new Vue({
//指定关联的元素
el: "#itany",
//存储数据
data: {
msg: "hello world"
}
});
<div id="itany">
<!-- 两对大括号{{}}称为模板，用来进行数据的绑定显示在页面中 -->
{{msg}}
</div>
2.4 配置非开发环境
//配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
Vue.config.devtools = false;
//阻止vue启动时生成生产消息
Vue.config.productionTip = false;
2.5 注意
引用script的时候路径前面不能有“/"
<script src="js/vue.js"></script> 正确
<script src="/js/vue.js"></script> 错误
三、模板和指令
3.1 简介
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据
3.2 常用指令
赋值 （v-model、{{}}）
a.双向绑定 v-model
b.单向绑定
方式1:使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决
方式2:使用v-text、v-html
示例：v-model
var vm = new Vue({
el: "#itany",
data: {
name: "4444",
msg: "111111",
msg2: "<mark>22222</mark>",
},
});
/* 必须配置css样式，否则不生效 */
[v-cloak] {
display: none;
}
<input type="text" v-model="name">
<!--隐藏未编译的 Mustache 标签直到实例准备完毕-->
<h3>aaa<span v-cloak>{{msg}}</span></h3>
<!--v-text-->
<h3 v-text="msg2"></h3>
<!--v-html 可以识别html-->
<h3 v-html="msg2"></h3>
v-for
对数组或对象进行循环操作。
示例：v-for
var vm = new Vue({
el: "#itany",
data: {
aar:[12,33,332,23,12],
user:{"id":988,"name":"fdffd"},
users:[
{"id":988,"name":"搪玻璃"},
{"id":988,"name":"范德萨"},
{"id":988,"name":"你还能还"}
]
}
});
<!--普通循环-->
<!--数组-->
<ul->
<li v-for="value in aar">{{value}}</li>
</ul->
<br>
<ul->
<!--绑定key，可以重用元素，提高渲染时的效率-->
<li v-for="(v,k) in aar" :key="k">{{k}}={{v}}</li>
</ul->
<br>
<!--对象-->
<ul->
<li v-for="value in user">{{value}}</li>
</ul->
<br>
<ul->
<li v-for="(user,index) in users">
{{index}},{{user.id}},{{user.name}}
</li>
</ul->
v-on
用来绑定事件，用法:v-on:事件=“函数”
示例：v-on
var vm = new Vue({
el: "#itany",
data: {
arr:[12,34,32]
},
methods:{
show:function () {
console.log("show");
},
add(){
//this就是这个Vue实例
this.arr.push(77);
}
}
});
<button v-on:click="show()">点我</button>
<!--没有入参可以不加括号-->
<button v-on:click="add">添加数组</button>
v-show/v-if
用来显示或隐藏元素，vshow是通过display实现，vif是每次删除后再重新创建。
示例：v-show/v-if demo
<!--通过display实现-->
<div v-show="true">欢迎你</div>
<!--删除后再重新创建-->
<div v-if="flag">欢迎你2</div>
v-once
数据只绑定一次。
示例：v-once
var vm = new Vue({
el: "#itany",
data: {
name: "4444",
}
});
<!--v-once 只会绑定一次-->
<p v-once>{{name}}</p>
v-pre
不编译，直接原样显示。
示例：v-pre
<!--v-pre 不编译，直接原样显示-->
<p v-pre>{{name}}</p>
四、事件
4.1 简写
v-on:click="" 简写方式 @click=""
4.2 事件对象$event
包含事件相关信息。相当于onclick中的事件
<button @click="showEvent($event)">event</button>
4.3 阻止事件冒泡
事件会向上传递
a) 原生js方式，依赖于事件对象
event.stopPropagation();
b) vue方式，不依赖于事件对象
<button @click.stop="print3()">阻止冒泡Vue</button>
4.4 阻止默认修饰符
链接点击会拼接字符。
a) 原生js方式，依赖于事件对象
event.preventDefault();
b) vue方式，不依赖于事件对象
<a href="#" @click.prevent="show3()">阻止修饰符Vue</a>
4.5 键盘事件
@keydown、@keypress、@keyup
1、可以方法返回event。
<input type="text" @keydown="showKey($event)">
2、可以使用系统定义的按键
<input type="text" @keydown.enter="showKey()">
3、可以自定义按键
//自定义按键
Vue.config.keyCodes={
a:65
}
<input type="text" @keydown.a="showKey()">
4.6 事件修饰符
一些常用修饰符
.stop阻止单击事件继续传播.prevent提交事件不再重载页面.capture即内部元素触发的事件先在此处理，然后才交由内部元素进行处理.self只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的.once点击事件将只会触发一次.passive滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待onScroll完成
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
修饰字符串某些不冲突情况下可以串联
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
注意： 不要把 .passive 和 .prevent 一起使用
五、属性
5.1 简介
v-bind 用于属性绑定， v-bind:属性=""
v-bind:src="" 简写为 :src=""
5.2 class和style的几种使用方式
var vm = new Vue({
el: "#itany",
data: {
url:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
w:"200px",
h:"100px",
bb:'aa',
dd:'cc',
flag:true,
num:-2,
hello:{aa:true,cc:true},
xx:{color:'blue',fontSize:'30px'},
yy:{backgroundColor:'#ff7300'}
},
methods:{
}
});
<style>
.aa{
color:red;
font-size:20px;
}
.cc{
background-color:#ccc;
}
</style>
<img :src="url" :width="w" :height="h">
<!-- 方式1:变量形式 -->
<p :class="bb">南京南京</p>
<!-- 方式2：数组形式，同时引用多个 -->
<p :class="[bb,dd]">南京南京</p>
<!-- 方式3：json形式，常用！！！ -->
<p :class="{aa:true,cc:flag}">南京南京</p>
<p :class="{aa:num>0}">南京南京</p>
<!-- 方式4：变量引用json形式 -->
<p :class="hello">南京南京</p>
<!-- style属性 -->
<p :style="[xx,yy]">itany</p>
六、过滤器
6.1简介
用来过滤模型数据，在显示之前进行数据处理和筛选
语法:{{ data | filter1(参数) | filter2(参数)}}
6.2 内置过滤器或者三方过滤器
Vue2.0将内置过滤器都废除了，所以可以通过使用三方过滤器或者自定义过滤器使用。
常用三方过滤器：
lodash：一些常用的数据处理
data-fns：日期格式化
accounting.js：货币格式化
6.3 自定义过滤器
6.3.1 全局过滤器
定义（全局定义）：
Vue.filter("number1", (data, n) => {
return data.toFixed(n);
});
使用:
<h3>{{1.2345|number1(2)}}</h3>
6.3.2 局部过滤器
定义（在vue中）：
filters: {
number2: (data, n) => {
return data.toFixed(n);
}
}
使用：
<h3>{{2.3456|number2(2)}}</h3>
1876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
