1.在Vue实例中，如果想要获取data上的数据或则调用methods中的方法，通过this.data上的属性名或this.methods上的方法名来进行获取！
2.凡是定义全局的操作，都没有s；凡是定义私有的操作都需要s
指令
v-cloak属性：(设置样式display:none)
解决插值表达式{{ }}闪烁的问题，只会替换自身的占位符，不会清空元素原本的内容
v-text='data中的属性名'：默认不会出现闪烁，会覆盖元素中原本的内容
v-html='data中的属性名':不会出现闪烁，会覆盖元素中原本的内容,可识别HTML标签
v-bind:用于绑定属性（v-bind:title="data中的属性名 + '合法的js语法' "）简写符:
v-on:事件类型='变量名'（v-on:click='show'）简写符@
<style>
[v-cloak]{
display: none;
}
</style>
<div class="app">
<p v-cloak>{{mes}}显示出来了</p>
<p v-text="mes" v-cloak>被覆盖了，不会被显示</p>
<p v-html="mes2">加载被显示了</p>
<input type="button" :title="mes3+'我是合法的js语法'">
<input type="button" @click="show">
</div>
<!--这里需要先导入vue的包-->
<script>
var vm = new Vue({
el:'.app',
data:{
mes:'前端最火框架Vue',
mes2:'<h1>大标题</h1>',
mes3:'这是绑定的title属性'
},
methods:{
show(){
alert('点击按钮触发了show方法')
}
}
})
</script>
事件修饰符
@click.stop=" " : 阻止冒泡
@click.prevent=" " :阻止默认事件
.capture=" " :使用事件捕获机制
@click.self=" " :操作当前元素时，才会触发事件处理函数
@click.once=" " ：只触发一次事件处理函数
使用v-model实现表单元素中的数据双向绑定（v-bind只能实现单向数据绑定）
<div class="app">
<input type="text" v-model="mes">
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el:'.app',
data:{
mes:'双向数据绑定'
}
})
</script>
使用v-for循环遍历
v-for="(每一项的元素item，索引i) in data数据上的属性名" :key='item.id'
或
v-for="count in 10" ：索引从1开始循环遍历10次<p v-for='count in 10'>{{ count }}</p>
注意：key属性只能使用number或string类型来代替，在使用时，必须通过v-bind形式绑定
<div class="app">
<ul>
<li v-for="(item,i) in list" :key='item.id'>{{ item.name }}</li>
</ul>
<p v-for='count in 10'>{{ count }}</p>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el:'.app',
data:{
list:[
{ id:1, name:'五菱宏光' },
{ id:2, name:'悍马' },
{ id:3, name:'宝马' },
{ id:4, name:'奔驰' }
]
}
})
</script>v-if 和 v-show
v-if=" 布尔值 " :每次都会重新创建或删除元素
v-show=" 布尔值 " ：切换了元素的display：none样式
<div class="app">
<input type="button" @click="display" value="toggle">
<p v-if="flag">显示或者隐藏</p>
<p v-show="flag">显示或者隐藏</p>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el:'.app',
data:{
flag:true
},
methods:{
display(){
this.flag = !this.flag
}
}
})
</script>
过滤器的使用（filter）
过滤器两个条件：过滤器名称和处理函数（可以有多个过滤器）
Vue.filter('过滤器的名称'，function(原始数据，操作数据--可以有多个){
return 操作结果
})
<div class="app">
<!--
原始要展示的内容（mes）：你好，我好，她好，大家好，才是真的好
过滤器过滤后展示的内容（mesFilter）：你坏，我坏，她坏，大家坏，才是真的坏
-->
<p>{{ mes | mesFilter('坏') }}</p>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
/*全局过滤器*/
Vue.filter('mesFilter',function (mes,str) {
/*通过传参，全局修改好字为坏字，str参数可以有多个，用逗号分开*/
return mes.replace(/好/g,str);
});
var vm = new Vue({
el:'.app',
data:{
mes:"你好，我好，她好，大家好，才是真的好"
},
/*私有过滤器*/
// filters: {
// mesFilter: function (mes, str) {
// }
// }
})
</script>按键修饰符
Vue中提供了9个按键修饰符如下：
1 .enter
2 .tab
3 .delete (捕获“删除”和“退格”键)
4 .esc
5 .space
6 .up
7 .down
8 .left
9 .right@keyup.enter=" 方法名 " ：按enter键松开后执行事件处理函数
自定义按键修饰符：Vue.config.keyCode.键盘值= 对应的keyCode值;(Vue.config.keyCode.f2= 113)
就可以使用f2了。。。（以此类推）
<input type="text" class="app" @keyup.enter="didi">
<script src="../lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el:'.app',
methods: {
didi(){
console.log("文本框中按enter执行了")
}
},
})
</script>自定义指令（directive）
定义指令名称时前面不需要v-前缀，调用时必须在指令名称中加上v-前缀，调用是需要用引号把值包起来
Vue.directive('指令名称'，{函数})
Vue.directive('focus',{
bind:function (el,binding) { //基于样式类型的操作使用bindhans函数
binding.name:拿到自定义指令名称
binding.value:拿到自定义指令的值（计算后的值）
binding.expression:拿到自定义指令的原内容的值
},
inserted:function (el) { //基于js类型的操作使用inserted函数
},
updated:function(el){ //当vNode更新是执行
}
})
<div class="app">
<input type="text" class="form-control" v-focus v-color="'green'">
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
/*自定义全局指令（获取焦点）*/
Vue.directive('focus', {
inserted: function (el) {
el.focus();
}
});
/*自定义全局指令（设置颜色）*/
Vue.directive('color', {
bind: function (el, binding) {
el.style.color = binding.value;
}
});
var vm = new Vue({
el:'.app',
/*自定义私有全局指令*/
// directives:{
// "指令名称":{
// bind(){},
// inserted(){},
// updated(){}
// }
// }
})通过ref获取DOM元素和组件中的data、methods
1.在标签中设置ref属性：<h1 ref="h" >这是h1标签</h1>
2.通过this.$refs.ref中的值获取到这个元素（this.$refs.h）
<div class="app">
<input type="button" value="输出下面h3标签内容" @click="out">
<h3 ref="h3">马云马化腾李彦宏张一鸣刘强东雷军</h3>
<com ref="com"></com>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el:'.app',
data:{},
methods:{
out(){
console.log(this.$refs.h3.innerHTML);
console.log(this.$refs.com.mes);
this.$refs.com.show();
}
},
components:{
com:{
template:'<h1>组件中的模板内容</h1>',
data(){
return {
mes:'组件中的数据'
}
},
methods:{
show(){
console.log('调用了show方法')
}
}
}
}
})
</script>使用watch属性，监听data中指定数据的变化
在Vue实例中，watch：{
data属性名：function（新数据newVal , 旧数据oldVal）{ }
}
<!--实现前两个文本内容拼接成第三个文本框的内容-->
<div class="app">
<input type="text" v-model="firstName">+
<input type="text" v-model="lastName">=
<input type="text" v-model="Name">
</div>
<script>
var vm = new Vue({
el: '.app',
data: {
firstName: '',
lastName: '',
Name: ''
},
/*使用watch属性监听data中指定数据的变化，是一个对象，对象中存放data属性名指定一个函数，函数有两个参数分别是新数据和旧数据*/
watch: {
firstName: function (newVal, oldVal) {
this.Name = newVal +'-'+ this.lastName;
},
lastName(newVal){
this.Name = this.firstName +'-'+ newVal;
}
}
})
</script>可以用来监听路由地址栏的改变
使用computed属性用于计算
任何data上的数据发生了变化，就会重新计算这个属性的值
computed：{ data上的属性名或v-model：function(){ return 处理结果 } }
<!--实现前两个文本内容拼接成第三个文本框的内容-->
<div class="app">
<input type="text" v-model="firstName">+
<input type="text" v-model="lastName">=
<input type="text" v-model="Name">
</div>
<script>
var vm = new Vue({
el: '.app',
data: {
firstName: '',
lastName: ''
},
methods: {},
/*使用computed计算属性：用于计算，是一个属性不是方法，
任何data上的数据发生了变化，就会重新计算函数中这个属性的值(需要return出去),
会缓存这个属性的值,方便下次使用*/
computed: {
Name: function () {
return this.firstName + '-' + this.lastName
}
}
})
</script>使用render属性渲染组件
render:function(createElements){ return createElements(组件对象) }
注意：return 后的结果会替换el指定的容器
<div class="app">
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
var login = {
template:'<h1>登录页面</h1>'
}
var vm = new Vue({
el:'.app',
render:function(createElements){ //createElements是一个方法，调用这个方法，能够把自定的模板渲染为HTML结构
return createElements(login); //return的结果会替换el指定的那个容器
}
})
</script>