0.定义Vue基本html结构
<script src="https://cdn.bootcss.com/vue/2.4.0/vue.js"></script>
<div id="app">
<p>{{msg}}</p>
<p v-text="msg"></p>
<p v-html="msg2"></p>
<p v-bind:title="title">看title</p>
<p :title="title">看title</p>
<input type="button" value="按钮" v-on:click="show">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'hello,vue',
msg2:'<h1>hello,vue</h1>',
title:'title测试',
},
methods: {
show:function(){
alert('你点到我了！');
}
},
});
</script>
1.插值表达式 和 v-text
插值表达式：
<p>{{msg}}</p>
v-text:
<p v-text="msg"></p>
2.v-html
跟v-text类似，但支持html标签解析。
3.v-bind
属性绑定机制，缩写是：:
4.v-on
事件绑定机制，缩写是：@
5.v-model
v-bind只能实现数据的单项绑定，无法实现数据的双向绑定
v-model可以实现数据的双向绑定
<div id="app">
<p>{{ msg }}</p>
单项绑定:<input type="text" :value="msg" ><br>
双向绑定：<input type="text" v-model:value="msg">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
'msg':'从小爱吃零食，长大为人正直~~'
}
});
</script>
注：v-model只能运用在表单元素中
6.v-for指令
循环普通数组
不带索引：
<div id="app">
<p v-for="item in list">{{item}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
list:[1,2,3,4,5]
}
});
</script>
带索引：
<div id="app">
<p v-for="(item,i) in list">{{i}}:{{item}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
list:[1,2,3,4,5]
}
});
</script>
注：其中i为索引值
循环对象数组
<div id="app">
<p v-for="item in list">姓名：{{item.name}}，年龄：{{item.age}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
list:[
{'name':'张三','age':18},
{'name':'李四','age':20},
]
}
});
</script>
循环对象
<div id="app">
<p v-for="(value,key) in user">键：{{key}}，值：{{value}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
user:{
id:1,
name:'张三',
age:'18'
}
}
});
</script>
带索引：
<p v-for="(value,key,i) in user">键：{{key}}，值：{{value}}，索引：{{i}}</p>
迭代数字：
<p v-for="count in 10">{{count}}</p>
注:count值从1开始
2.2.0+的版本里，当在组件中使用v-for时，key是必须的,key只接受string/number
当Vue.js用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的key属性。
7.v-if 和 v-show
每次都会重新删除或创建元素。有较高的切换性能消耗。
每次不会重新进行DOM的删除和创建操作，只是切换了元素的display:none样式
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<p v-if="flag">从小爱吃零食</p>
<p v-show="flag">长大为人正直</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data: {
flag:true
}
});
</script>
修饰符
事件修饰符
.stop
.prevent
.capture
.self
.once
.passive
按键修饰符
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
自定义按键修饰符：
Vue.config.keyCodes.f1 = 112
过滤器
Vue.js允许自定义过滤器，可被用作一些常见的文本格式化，过滤器可以用在两个地方：mustache插值和v-bind表达式，过滤器应该被添加在JavaScript表达式的尾部，由管道符：| 指示。
全局过滤器
Demo1：字符串替换
<div id="app">
<p>{{ msg | msgFormat('水果')}}</p>
</div>
<script>
Vue.filter('msgFormat',function(str,args){
return str.replace(/零食/g,args);
})
var vm = new Vue({
el:'#app',
data:{
msg:'从小爱吃零食，长大也爱吃零食'
}
})
</script>
Demo2：设置时间格式
<div id="app">
<p>当前时间：{{ ctime | dateFormat}}</p>
</div>
<script>
Vue.filter('dateFormat',function(timestr){
var t = new Date(timestr)
var y = t.getFullYear()
var m = (t.getMonth()+1).toString().padStart(2,'0');
var d = (t.getDay()).toString().padStart(2,'0');
return `${y}-${m}-${d}` //ES6中提供了模版字符串，用`（反引号）标识，用${}将变量括起来
})
var vm = new Vue({
el:'#app',
data:{
ctime:new Date()
}
})
</script>
私有过滤器
私有过滤器调用的时候，如果私有过滤器与全局过滤器名称一致，则优先调用私有过滤器。
<div id="app">
<p>{{ msg | msgFormat}}</p>
</div>
<script>
Vue.filter('msgFormat',function(str){
return str.replace(/零食/g,'水果');
})
var vm = new Vue({
el:'#app',
data:{
msg:'从小爱吃零食，长大也爱吃零食',
ctime:new Date()
},
filters:{
msgFormat:function(str){
return str.replace(/零食/g,'冰粉');
}
}
})
</script>
结果：从小爱吃冰粉，长大也爱吃冰粉
自定义指令
使用vue.directive定义全局指令
以下示例通过在input输入框中添加v-focus指令，实现页面加载后，自动获取焦点功能。
<div id="app">
搜索：<input type="text" id="search" v-focus>
</div>
<script>
//使用vue.directive定义全局指令，第一个参数为指令的名称，前面不需要加v-，但调用的时候要加上v-前缀
Vue.directive('focus', {
//每当指令绑定在元素上的时候，会立即执行bind函数，只执行一次
//在每个函数中都有一个el参数，是一个原生的js对象
bind:function(el){
console.log('触发bind函数~')
},
//元素插入到DOM中的时候触发，也只触发一次
inserted:function(el){
el.focus()
console.log('触发inserted函数~')
},
//当VNode更新的时候触发，可能会触发多次
updated:function() {
console.log('触发updated函数~')
},
})
var vm = new Vue({
el:'#app',
data:{
}
})
</script>
