1、 Vue 指定id
一个页面中要给要使用Vue的地方指定一个id，把他赋值给el。
比如：
<div id="app">
<h1>{{message}}</h1>
<input type="text" v-model="message">
<span>
{{ $data.message}}
</span>
</div>
new Vue({
el: "#app", //选定id
data: {
message: "Hello World!" // 输出message的内容
}
});
2、 Vue给值和内容
有两种给值的方法：
法一：
(1) 给输入框v-model=”vueText”
(2) 给一个标签填值：{{ vueText }}
法二：
(1) 给输入框v-model=”vueText”
(2) 在js中：给data传值
new Vue({
el: "#app", //选定id
data: {
vueText: "Hello World!" // 输出message的内容
}
});
(3) 给标签填值：{{$data.vueText}}
3、 Vue事件
在html中，事件的方法用@click=”clickListener”
在js中，方法具体执行用：
new Vue({
el: "#vueForm",
data: {
username: ""
},
methods: {
clickListener: function() {
alert(this.username);
}
}
});
注意：当要传入event时，可以使用$event
@:click="say('hello!', $event)
4、 Vue组件化一
使用方法 ：
(1)<custom>中声明name属性,其中custom和name都是可以自定义的，但是属性要注意，全是小写字母才可以
(2)定义一个模板<template>，用来设置刚才定义的<custom>
(3)js中创建Vue
new Vue({
el: '#app'
})
(4) js中给Vue组件化处理
Vue.component('custom', {
template: '#template', // 模板对应的id
props: ['name'], // <custom>对应的属性
data: function() {
return {
count: 0
}
}
});
注意： Vue.component 要放在new Vue()之前，不然会有警告
比如：
<div id="app">
<custom name="赞"></custom>
<custom name="踩"></custom>
</div>
<template id="template">
<h1>{{name}}</h1>
<button @click="count += 1">{{count}}</button>
</template>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
Vue.component('custom', {
template: '#template',
props: ['name'],
data: function() {
return {
count: 0
}
}
});
new Vue({
el: '#app'
})
</script>
5、 Vue组件化二
比如：
// 定义
var Tree = Vue.extend({
template: '<div>This is a tree!</div>'
});
// 注册
Vue.component('tree', Tree);
// 开始渲染
new Vue({
el: '#box'
});
6、 Vue组件化三
使用方法： 直接在new Vue里面添加对象：computed
比如：
new Vue({
el: '#app',
data: {
points: 300,
},
computed: {
level: function() {
if (this.points <= 200) {
return '普通会员'
}
return 'VIP会员'
}
}
})
7、 Vue循环
用法：v-for='item in items'
v-for='(index, item) in items' *数组则是索引，遍历对象则是键
比如：
v-for = ‘book in books’
8、 指令缩写
v-bind可以缩写为:
v-on:可以缩写为@
比如：
<a v-bind:href="url"></a>
<a :href="url"></a>
<button v-on:click="btnClick"></button>
<button @click="btnClick"></button>
9、 自定义的指令
Vue.directive()
比如：
Vue.directive('demo', {
bind: function () {
// 准备工作
// 例如，添加事件处理器或只需要运行一次的高耗任务
},
update: function (newValue, oldValue) {
// 值更新时的工作
// 也会以初始值为参数调用一次
},
unbind: function () {
// 清理工作
// 例如，删除 bind() 添加的事件监听器
}
})
10、$remove
这是vue为数组扩展的删除的方法
比如：
delBook:function(book){
this.books.$remove(book);
}
11、 v-if和v-else
12、声明一个Vue构造函数
有两种使用方法：
（1）new Vue({
el: “#id”
});
（2）var vm = new Vue();
Vm.$el = “#id”
两者的区别是：如果放在里面的不用加$,如果是把对象提出来的话，那就要加上$，其他的对象名也是如此。
13、观察
值得提醒的是，一旦数据被观察，Vue.js 就不会再侦测到新加入或删除的属性了。作为弥补，我们会为被观察的对象增加 $add， $set和 $delete 方法。
14、响应式指令
（1）v-attr
（2）v-style
（3）v-class
（4）v-text
设置之后，不管里面含有什么内容，里面的东西都会被替换掉
<div v-text="vText">
<span>123</span>
</div>
（5）v-show
通过true和false来控制元素是否显示
<div v-show="vShow">我是通过v-show来决定显不显示的</div>
（6）v-on
常见的按键有提供别名：
·enter
·tab
·delete
·esc
·space
·up
·down
·left
·right
比如：
《1》阻止冒泡和默认行为：<a @click.stop.prevent='doThis' />
《2》v-on绑定enter按键可以使用：（注意：这里的13就是.enter）[这里有错，具体错误看 响应式指令.html 只有点击了按钮之后才能使用enter按键]
@keyup.13 = "bindEnter"
（7）v-repeat
（8）v-with
（9）v-if: 根据v-if的值，真假删除/插入元素
15、数据的处理方法
（1）当传来的数据是：messageStr: "第一个,第二个,第三个",
可以对数据进行这样处理：
<div>{{messageStr.split(",").reverse().join("|")}}</div>
16、Class与Style绑定
（1）*变量语法：v-bind:class="{'class-a':isA, 'class-b':isB}"
-->
data:{isA:true, isB:false}
（2）*对象语法：v-bind:class="classObj"
--> data:{classObj:{'class-a':true, 'class-b':false}
（3） *数组语法：v-bind:class='[classA, classB]'
--> data:{classA:'class-a', classB:'class-b'}
17、父组件向子组件传值
（1）父组件：<input v-model="dialogmsg" type="text" />
（2）然后给子组件容器一个自定义的:my-messages名称
<mydialog :my-messages="dialogmsg"></mydialog>
（3）在子组件的js中：
需要定义一个props,其中名称以给子组件容器定义的名称去掉短横线，并将短横线后的第一个字母改为大写的
比如：props: ["myMessages"],
（4）子组件的template可以直接使用{{myMessages}}
18、子组件向父组件传值
（1）在子组件的js中，触发事件
比如：this.$dispatch("isShow", false);
（2）在父组件的js中，创建实例时 `events`，监听事件
比如：
events: {
'isShow': function(msg) { // 监听到 child-msg事件
this.isShow = msg; // messages改变自动修改html内容
}
}
19、过滤(/排序)
过滤可以是链式调用过滤器，就是一个过滤器的输出成为下一个过滤器的输入，然后再次过滤。
(1)filteBy
a) filterBy ‘ccl’ in ‘name’,过滤name中含有ccl关键字的列表
b) filterBy ‘ccl’ in ‘name’ ‘no’,过滤name,no中含有ccl关键字的列表
(2)orderBy
默认的排序是升序，如果想要排序是降序的话，就在原本排序条件后面加上一个小于0的复数就可以啦
比如：orderBy sortParam -1
(3)链式
比如：v-for="book in books |filterBy '水' in 'name' | orderBy sortParam
20、{{*message}}
插值，只会影响单次的改变，之后的改变不再发生变化，比如：
<input type="text" v-model="message">
<span>{{*message}}</span>
21、created
实例创建的初始化步骤，建立数据观察
22、$watch
实时监测变化
vm.$watch("message", function(newVal, oldVal) {
console.info(newVal, "|",oldVal)
});
24、参数特性
（1）lazy
在同步输入框与值的input里面，添加一个lazy特性，将其改动到change事件中同步。
比如：
<!-- 在 "change" 而不是
"input" 事件中更新 -->
<input v-model="msg" lazy>
（2）number
自动将用户的输入转为number类型。
比如：
<input v-model="age" number>
（3）debounce
设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作（例如在输入提示中 Ajax 请求），它较为有用。
比如：
<input v-model="msg" debounce="500">
25、过渡
在需要过渡的目标元素上使用transition特性，该特性可以和下面的资源一起使用：
（1）v-if
（2）v-show
（3）v-for(只有插入和删除时触发，使用vue-animated-list插件)
（4）组件动态
（5）在组件的根节点上，并且被Vue实例DOM化，（比如：vm.$appendTo(el)）触
25、prop绑定类型
默认是单向绑定，当父组件的属性改变时，将传给父组件，反之不会，这是为了防止子组件五一修改父组件的状态，这样的话，会让应用的数据难以理解，不过可以使用.sync或者.once绑定修饰符显式的强制双向或者单次绑定。
比较语法：
|
<!-- 默认为单向绑定 --> |
26、动画过渡
(1)可以使用<transition name=”xx”>
(2)为xx定义动画的样式
<1>原本默认的样式
<2>离开和进入的样式
xx-enter,xx-leave{}
27、定义:class的样式
比如：
（1）<div :class="[typeClass]" >
（2）props: {
type: {
type: String,
default: 'info'
},
},
（3）computed: {
typeClass() {
return `el-alert--${this.type}1`;//这里使用反单引号
}
}
28、slot
分发，是当某子组件不知道它的挂载点的内容是什么的时候，并且挂载点的内容有它的父组件决定的，可以使用slot元素来作为原始内容的插槽。
比如：
父组件：
<cc-button type="primary">主要按钮</cc-button>
子组件：
<button class="btn" :class="[btnType]">
<slot></slot>
</button>
显示：
29、@click.native
可以让一个子组件直接当前页面写click的监听事件，其他事件也是如此
比如：<cc-button @click.native="open">弹出框message</cc-button>
更多的话，会及时更新~
1、 Vue 指定id
一个页面中要给要使用Vue的地方指定一个id，把他赋值给el。
比如：
<div id="app">
<h1>{{message}}</h1>
<input type="text" v-model="message">
<span>
{{ $data.message}}
</span>
</div>
new Vue({
el: "#app", //选定id
data: {
message: "Hello World!" // 输出message的内容
}
});
2、 Vue给值和内容
有两种给值的方法：
法一：
(1) 给输入框v-model=”vueText”
(2) 给一个标签填值：{{ vueText }}
法二：
(1) 给输入框v-model=”vueText”
(2) 在js中：给data传值
new Vue({
el: "#app", //选定id
data: {
vueText: "Hello World!" // 输出message的内容
}
});
(3) 给标签填值：{{$data.vueText}}
3、 Vue事件
在html中，事件的方法用@click=”clickListener”
在js中，方法具体执行用：
new Vue({
el: "#vueForm",
data: {
username: ""
},
methods: {
clickListener: function() {
alert(this.username);
}
}
});
注意：当要传入event时，可以使用$event
@:click="say('hello!', $event)
4、 Vue组件化一
使用方法 ：
(1)<custom>中声明name属性,其中custom和name都是可以自定义的，但是属性要注意，全是小写字母才可以
(2)定义一个模板<template>，用来设置刚才定义的<custom>
(3)js中创建Vue
new Vue({
el: '#app'
})
(4) js中给Vue组件化处理
Vue.component('custom', {
template: '#template', // 模板对应的id
props: ['name'], // <custom>对应的属性
data: function() {
return {
count: 0
}
}
});
注意：Vue.component 要放在new Vue()之前，不然会有警告
比如：
<div id="app">
<custom name="赞"></custom>
<custom name="踩"></custom>
</div>
<template id="template">
<h1>{{name}}</h1>
<button @click="count += 1">{{count}}</button>
</template>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
Vue.component('custom', {
template: '#template',
props: ['name'],
data: function() {
return {
count: 0
}
}
});
new Vue({
el: '#app'
})
</script>
5、 Vue组件化二
比如：
// 定义
var Tree = Vue.extend({
template: '<div>This is a tree!</div>'
});
// 注册
Vue.component('tree', Tree);
// 开始渲染
new Vue({
el: '#box'
});
6、 Vue组件化三
使用方法： 直接在new Vue里面添加对象：computed
比如：
new Vue({
el: '#app',
data: {
points: 300,
},
computed: {
level: function() {
if (this.points <= 200) {
return '普通会员'
}
return 'VIP会员'
}
}
})
7、 Vue循环
用法：v-for='item in items'
v-for='(index, item) in items' *数组则是索引，遍历对象则是键
比如：
v-for = ‘book in books’
8、 指令缩写
v-bind可以缩写为:
v-on:可以缩写为@
比如：
<a v-bind:href="url"></a>
<a :href="url"></a>
<button v-on:click="btnClick"></button>
<button @click="btnClick"></button>
9、 自定义的指令
Vue.directive()
比如：
Vue.directive('demo', {
bind: function () {
// 准备工作
// 例如，添加事件处理器或只需要运行一次的高耗任务
},
update: function (newValue, oldValue) {
// 值更新时的工作
// 也会以初始值为参数调用一次
},
unbind: function () {
// 清理工作
// 例如，删除 bind() 添加的事件监听器
}
})
10、 $remove
这是vue为数组扩展的删除的方法
比如：
delBook:function(book){
this.books.$remove(book);
}
11、 v-if和v-else
12、 声明一个Vue构造函数
有两种使用方法：
（1）new Vue({
el: “#id”
});
（2）var vm = new Vue();
Vm.$el = “#id”
两者的区别是：如果放在里面的不用加$,如果是把对象提出来的话，那就要加上$，其他的对象名也是如此。
13、 观察
值得提醒的是，一旦数据被观察，Vue.js 就不会再侦测到新加入或删除的属性了。作为弥补，我们会为被观察的对象增加 $add， $set和 $delete 方法。
14、 响应式指令
（1）v-attr
（2）v-style
（3）v-class
（4）v-text
设置之后，不管里面含有什么内容，里面的东西都会被替换掉
<div v-text="vText">
<span>123</span>
</div>
（5）v-show
通过true和false来控制元素是否显示
<div v-show="vShow">我是通过v-show来决定显不显示的</div>
（6）v-on
常见的按键有提供别名：
·enter
·tab
·delete
·esc
·space
·up
·down
·left
·right
比如：
《1》阻止冒泡和默认行为：<a @click.stop.prevent='doThis' />
《2》v-on绑定enter按键可以使用：（注意：这里的13就是.enter）[这里有错，具体错误看响应式指令.html 只有点击了按钮之后才能使用enter按键]
@keyup.13 = "bindEnter"
（7）v-repeat
（8）v-with
（9）v-if: 根据v-if的值，真假删除/插入元素
15、 数据的处理方法
（1）当传来的数据是：messageStr: "第一个,第二个,第三个",
可以对数据进行这样处理：
<div>{{messageStr.split(",").reverse().join("|")}}</div>
16、 Class与Style绑定
（1）*变量语法：v-bind:class="{'class-a':isA, 'class-b':isB}"
-->
data:{isA:true, isB:false}
（2）*对象语法：v-bind:class="classObj"
--> data:{classObj:{'class-a':true, 'class-b':false}
（3） *数组语法：v-bind:class='[classA, classB]'
--> data:{classA:'class-a', classB:'class-b'}
17、父组件向子组件传值
（1）父组件：<input v-model="dialogmsg" type="text" />
（2）然后给子组件容器一个自定义的:my-messages名称
<mydialog :my-messages="dialogmsg"></mydialog>
（3）在子组件的js中：
需要定义一个props,其中名称以给子组件容器定义的名称去掉短横线，并将短横线后的第一个字母改为大写的
比如：props: ["myMessages"],
（4）子组件的template可以直接使用{{myMessages}}
18、子组件向父组件传值
（1）在子组件的js中，触发事件
比如：this.$dispatch("isShow", false);
（2）在父组件的js中，创建实例时 `events`，监听事件
比如：
events: {
'isShow': function(msg) { // 监听到 child-msg事件
this.isShow = msg; // messages改变自动修改html内容
}
}
19、过滤(/排序)
过滤可以是链式调用过滤器，就是一个过滤器的输出成为下一个过滤器的输入，然后再次过滤。
(1)filteBy
a) filterBy ‘ccl’ in ‘name’,过滤name中含有ccl关键字的列表
b) filterBy ‘ccl’ in ‘name’ ‘no’,过滤name,no中含有ccl关键字的列表
(2)orderBy
默认的排序是升序，如果想要排序是降序的话，就在原本排序条件后面加上一个小于0的复数就可以啦
比如：orderBy sortParam -1
(3)链式
比如：v-for="book in books |filterBy '水' in 'name' | orderBy sortParam
20、{{*message}}
插值，只会影响单次的改变，之后的改变不再发生变化，比如：
<input type="text" v-model="message">
<span>{{*message}}</span>
21、created
实例创建的初始化步骤，建立数据观察
22、$watch
实时监测变化
vm.$watch("message", function(newVal, oldVal) {
console.info(newVal, "|",oldVal)
});
24、参数特性
（1）lazy
在同步输入框与值的input里面，添加一个lazy特性，将其改动到change事件中同步。
比如：
<!-- 在 "change" 而不是
"input" 事件中更新 -->
<input v-model="msg"lazy>
（2）number
自动将用户的输入转为number类型。
比如：
<input v-model="age"number>
（3）debounce
设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作（例如在输入提示中 Ajax 请求），它较为有用。
比如：
<input v-model="msg"debounce="500">
25、过渡
在需要过渡的目标元素上使用transition特性，该特性可以和下面的资源一起使用：
（1）v-if
（2）v-show
（3）v-for(只有插入和删除时触发，使用vue-animated-list插件)
（4）组件动态
（5）在组件的根节点上，并且被Vue实例DOM化，（比如：vm.$appendTo(el)）触
25、prop绑定类型
默认是单向绑定，当父组件的属性改变时，将传给父组件，反之不会，这是为了防止子组件五一修改父组件的状态，这样的话，会让应用的数据难以理解，不过可以使用.sync或者.once绑定修饰符显式的强制双向或者单次绑定。
比较语法：
|
<!-- 默认为单向绑定 --> |
26、动画过渡
(1)可以使用<transition name=”xx”>
(2)为xx定义动画的样式
<1>原本默认的样式
<2>离开和进入的样式
xx-enter,xx-leave{}
27、定义:class的样式
比如：
（1）<div :class="[typeClass]" >
（2）props: {
type: {
type: String,
default: 'info'
},
},
（3）computed: {
typeClass() {
return `el-alert--${this.type}1`;//这里使用反单引号
}
}
28、slot
分发，是当某子组件不知道它的挂载点的内容是什么的时候，并且挂载点的内容有它的父组件决定的，可以使用slot元素来作为原始内容的插槽。
比如：
父组件：
<cc-button type="primary">主要按钮</cc-button>
子组件：
<button class="btn" :class="[btnType]">
<slot></slot>
</button>
显示：
29、@click.native
可以让一个子组件直接当前页面写click的监听事件，其他事件也是如此
比如：<cc-button @click.native="open">弹出框message</cc-button>