1. vue-'Hellow World'
<div id="app">
<div>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'HelloWorld' }
})
</script>
- el： 元素的挂载位置（值可以是CSS选择器或者DOM元素）
- data：模型数据（值是一个对象）
2. v-cloak指令用法
解决插值表达式村存在的问题：“闪动”
1.提供样式
[v-cloak]{
display:none;
}
- 在插值表达式所在的标签中添加v-cloak指令
<div v-cloak>{{msg}}</div>
背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果。
3. 数据绑定指令
-
v-text 填充纯文本
① 相比插值表达式更加简洁
- v-html 填充HTML片段
① 存在安全问题
② 本网站内部数据可以使用，来自第三方的数据不可以用 - v-pre 填充原始信息
① 显示原始信息，跳过编译过程（分析编译过程）
4. 数据响应式
数据的变化导致页面内容的变化
- v-once 只编译一次
显示内容之后不在具有响应式功能
5.双向数据绑定
v-model
<input type='text' v-model='msg' />
<div>{{mas}}</div>
在input输入框更改内容会引起div中数据的变化
+MVVM设计思想
- M(model)
- V(view)
-
VM(View-Model)
微信截图_20200920110106.png
- 事件监听
- 数据绑定
6. 事件绑定
- 处理事件
- v-on
<input type=‘button' v-on:click='num++'/>
- v-on简写
<input type=‘button' @click='num++'/>
- 事件函数的调用方法
- 直接绑定函数名称
<button v-on:click='say'>Hello</button>
- 调用函数
<button v-on:click='say()'>Say hi</button>
微信截图_20200920113336.png
7. 事件参数传递
- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
- 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event
<button v-on:click='handle1'>点击1</button>
<button v-on:click='handle2(123, 456, $event)'>点击2</button>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle1: function(event) {
console.log(event.target.innerHTML)//点击1
},
handle2: function(p, p1, event) {
console.log(p, p1) //123 456
console.log(event.target.innerHTML)//点击2
this.num++;
}
}
});
</script>
8. 事件修饰符
- .stop阻止冒泡
<a v-on:click.stop="handle">跳转</a>
- prevent阻止默认行为
<a v-on:click.prevent="handle">跳转</a>
vue官网链接https://cn.vuejs.org/v2/api/#v-on
9. 按键修饰符
- .enter 回车键
<input v-on:keyup.enter='submit'>
- .delete 删除键
<input v-on:keyup.delete='submit'>
10. 自定义按键修饰符
- 全局 config.keyCodes 对象
Vue.config.keyCodes.f1 = 112
//调用
v-on:keyup.f1='handle()'
11. v-bind
动态处理属性
- v-bind 指令用法
<a v-bind:herf='url'>跳转</a>
- 缩写形式
<a :herf='url'>缩写</a>
- v-model的低层实现原理分析
<input v-bind:value="msg" v-on:input="msg=$event.target.value">
12. class样式处理
- 对象语法
<div id="app">
<div v-bind:class="{active: isActive,error: isError}">
测试样式
</div>
<button v-on:click='handle'>切换</button>
</div>
var vm = new Vue({
el: '#app',
data: {
isActive: true,
isError: true
},
methods: {
handle: function(){
// 控制isActive的值在true和false之间进行切换
this.isActive = !this.isActive;
this.isError = !this.isError;
}
}
});
- 数组语法
<div id="app">
<div v-bind:class='[activeClass, errorClass]'>测试样式</div>
<button v-on:click='handle'>切换</button>
</div>
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'error'
},
methods: {
handle: function(){
this.activeClass = '';
this.errorClass = '';
}
}
});
- 样式绑定相关语法细节
- 对象绑定和数组绑定可以结合使用
<div v-bind:class='[activeClass, errorClass, {test: isTest}]'>测试样式</div>
- class绑定的值可以简化操作
<div v-bind:class='arrClasses'></div>
<div v-bind:class='objClasses'></div>
arrClasses: ['active','error'],
objClasses: {
active: true,
error: true
}
- 默认的class会保留
13. style样式处理
- 对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>
- 数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
//1
<div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div>
//2
<div v-bind:style='objStyles'></div>
//3
<div v-bind:style='[objStyles, overrideStyles]'></div>
var vm = new Vue({
el: '#app',
data: {
borderStyle: '1px solid blue',
widthStyle: '100px',
heightStyle: '200px',
objStyles: {
border: '1px solid green',
width: '200px',
height: '100px'
},
overrideStyles: {
border: '5px solid orange',
backgroundColor: 'blue'
}
},
});
14.分支循环解构
- 分支结构
- v-if
- v-else
- v-else-if
- v-show
<div v-if='score>=90'>优秀</div>
<div v-else-if='score<90&&score>=80'>良好</div>
<div v-else-if='score<80&&score>60'>一般</div>
<div v-else>比较差</div>
- v-if与v-show的区别
- v-if控制元素是否渲染到页面
- v-show控制元素是否显示（已经渲染到了页面）
15. 循环结构
- v-for遍历数组
<li v-for='item in list'>{{item}}</li>
<li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li>
- key的作用：帮助Vue区分不同的元素，从而提高性能
<li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li>
<li :key='item.id' v-for='(item, index) in myFruits'>
<span>{{item.ename}}</span>
<span>-----</span>
<span>{{item.cname}}</span>
</li>
var vm = new Vue({
el: '#app',
data: {
fruits: ['apple', 'orange', 'banana'],
myFruits: [{
id: 1,
ename: 'apple',
cname: '苹果'
},{
id: 2,
ename: 'orange',
cname: '橘子'
},{
id: 3,
ename: 'banana',
cname: '香蕉'
}]
}
});
- v-for遍历对象
<div v-for='(value, key, index) in object'></div> - v-if和v-for结合使用
<div v-if='value==12' v-for='(value, key, index) in object'></div>
<div id="app">
<div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
</div>
// 使用原生js遍历对象
var obj = {
uname: 'lisi',
age: 12,
gender: 'male'
}
for(var key in obj) {
console.log(key, obj[key])
}
/*
循环结构
*/
var vm = new Vue({
el: '#app',
data: {
obj: {
uname: 'zhangsan',
age: 13,
gender: 'female'
}
}
});
···
网友评论