Vue基础
一、Vue介绍：
- Vue是一个js渐进式框架，只注重视图层；
- 渐进式：主张最少，没有多做职责之外的事；
- MVVM开发模式的实现者：（model，view，viewmodel）
viewmodel：连接视图和数据的中间件，实现双向数据绑定；
二、Vue.js引入：
1）本地包；
2）CDN：内容分发网络；//从离自己最近的服务器上快速获取外部资源；
bootcdn：<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
三、Vue对象：
1）el：绑定vue对象到指定div；
2）data：提供数据，存放键值对；
3）methods：存放函数；
4）computed：计算属性：
-
- 计算结果存入缓存，重复调用不会重新执行函数；
- 调用时无需小括号；//调用方法需要小括号；
- methods和computed不能重名；
5）watch：监控data中的属性变化；
|
var v1 = new Vue({ el:'#app', data:{ title:"hello vue" }, watch:{ title:function(newValue,oldValue){ console.log(newValue+":"+oldValue); } } }); |
四、基本语法：
1、插值：
1）文本：<p>{{ message }}</p>
2）v-once不能修改：<p v-once>{{ message }}</p>
3）HTML：<div v-html="message"></div>
4）纯文本：<p v-html="message"></p>
2、表达式：
1）数组：{{[0,1,2,3,4][1]}}
2）对象：{{ {name:'xiaoming',age:20}.name }}
3）运算符：{{5+5}}
4）三目运算符：{{ ok ? 'YES' : 'NO' }}
5）函数：{{ message.split('').reverse().join('') }}
3、双向数据绑定：
<input v-model="message">
4、属性：v-bind；
1）class：<div v-bind:class="{'class1': use}">v-bind:class 指令</div>
2）id：<div v-bind:id="'list-' + id"></div>
3）href：<a v-bind:href="url"></a>
缩写：<a :href="url"></a>
5、事件：v-on；
<input type="text" v-on:click="function()">
//函数名后的()小括号可以省略；
缩写：<input type="text" @input="function()">
1）this：当前Vue对象；
2）event：当前事件对象；
3）参数：v-on:click="increase(2)"；多参数：v-on:click="increase(2,event)"；
4）停止事件：event.stopPropagation();
//修饰符方式：<span v-on:mousemove.stop>停止鼠标事件</span>
6、修饰符：
1.事件修饰符：
1）stop阻止事件传播：<a v-on:click.stop></a>
2.按键修饰符：
1）enter回车：<input v-on:keyup.enter="submit">
2）tab制表符；
3）delete删除/退格；
4）esc；
5）space空格；
6）up/down/left/right方向键；
3.系统修饰键：
1）ctrl；2）alt；3）shift
4）meta徽标：<input @keyup.meta.67="method">；//win+c键触发；
4.鼠标修饰键：
1）left
2）right
3）middle
7、指令：
1.条件语句：
1）v-if：<p v-if="boolean"></p>
2）v-else：<p v-else="boolean"></p>
3）v-else-if：<div v-else-if="boolean">
4）v-show: <p v-show="boolean"></p>
//如果元素有display为none，设置v-show为true无法起作用；
v-if/v-show区别：
（1）v-if：删除元素；v-show添加display属性为none,隐藏的效果；
（2）v-show：性能更好，只是css切换；
2.循环语句：
1）<p v-for="a in args">{{a}}</p>
2）索引：<p v-for="(a,i) in args">{{i}}--{{a}}</p>
<div id="app">
<p v-for="a in args">{{a}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
args:[0,1,2,3,4,5]
}
})
</script>
3）对象：<p v-for="(v,k,i) in students">{{i}}--{{k}}--{{v}}</p>
<div id="app">
<p v-for="(v,k,i) in students">{{i}}--{{k}}--{{v}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
students:{
name:'zs',
age:12
}
}
})
</script>
4）数组，嵌套对象，嵌套for循环；
<li v-for=" student in students"> <span v-for="(v,k,i) in student">{{i}}--{{k}}--{{v}}</span> </li>
8、过滤器：
1）在插值表达式中：{{ message | capitalize }}
2）在v-bind指令中：<div v-bind:id="rawId | formatId"></div>
//过滤器可以串联：{{ message | filterA | filterB }}
