Vue基础语法及注意事项总结(一)
vue特点:
一套渲染UI的强大前段框架;
核心特征:响应式和组件化;
其它特征:
1.渐进式,可以在服务端项目中部分使用vue;
2.响应式支持,由面向DOM编程,转向面向数据编程;
3.组件化,可以把页面分成多个组件;
4.丰富的语法支持,优雅的单文件组件,完善的组件动画支持;成熟的生态,比如vue-cli,vueRouter,vuex等相关配套工具;
其它注意事项详见下面各个语法的详细介绍!!!
1.入门使用
1.vue官网引入依赖<script src=""></script>;
2.创建Vue对象;
3.在跟标签下进行数据操作;
注意:
1.根标签id属性必须与Vue实例的el属性值相对应;如:id="app" 对应 el:"#app";
2.赋值方法,{{meassage}},与data中的字段数值相对应;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
</body>
<script type="text/javascript">
let vm = new Vue({
el:"#app",
data:{
msg:'hello'
}
})
</script>
</html>
2.vue基础语法
v-bind:单项传输数据;
v-model:双向传输数据(比如在input/areatext/select标签中使用,可即时获取输入框中的文本内容);
v-for:可以绑定数组或对象的数据来渲染一个项目列表;
v-fi:条件判断,可以绑定事件,控制页面内容的显示状态;通常搭配v-on:click(或简写@click)(点击事件)使用;
v-once:一次性插值;
3.vue实例
3.1数据和方法
实例
let vm = new Vue({
el:"#app",
data:{
msg:"信息内容"
}
methods:{
method(){
console.log("定义方法使用")
}
}
})
3.2声明周期钩子
beforeCreated();
开始创建实例;
created();
实例创建出来,vue的实例基本上被初始化;
beforeMount();
在模板与数据相结合,页面渲染之前执行的函数;
mounted();使用较多
数据和模板结合完成,会将vue实例挂在到dom树上;
beforeUpdate();
数据发生改变,还没有渲染之前;
updated();
数据改变,并渲染完成
beforedDestoryed();
实例要被回收的时候执行;
destoryed();
实例回收完成的时候调用;
4.模板语法
也就是template关键字
使用注意:
如果有template,那么vue实例将会渲染template中的html标签,而不是渲染外面的标签!
5.计算属性
关键字:computed
与普通方法比较的特点:页面元素发生变化时,普通方法会重新执行一遍,而计算属性有缓存不会重新计算;只有更改computed中的数值时,才会执行!
注意:在html中调用取值时,不需要加括号,而普通方法的取值则需要加括号取值;
6.侦听属性
关键字watch
watch:{
msg(newVal,oldVal){
consloe.log("处理逻辑")
}
}
7.class动态绑定
:class(样式的绑定)
通常思路:
1.定义数组存放已定义的class的属性名;
2.通过条件判断来获取对应条件下获取对应的class属性名,已达到满足所需要的样式内容的需求;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class动态绑定</title>
<script src="./js/vue.js"></script>
<style>
.c1{
font-size: 100px;
}
.c2{
background-color: aqua;
margin-top: 60px;
font-size: xx-large;
}
</style>
</head>
<body>
<div id="app">
<!--<div class="c1">第一行内容:{{msg1}}</div>-->
<!--<div :class="{'c1':isActive}">第一行内容:{{msg1}}</div>-->
<div :class="[isActive?'c1':'c2']">第一行内容:{{msg1}}</div>/*三元运算符使用!!!*/
<div class="c2">第二行内容:{{msg2}}</div>
<button>按钮</button>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data:{
msg1:'齐德龙',
msg2:'咚咚锵',
arr:['c1','c2'],
isActive:true
}
})
</script>
</html>
8.条件渲染
v-if和v-show,v-if v-else-if v-else,的使用;
注意:v-if显示的数据内容,如果隐藏就从DOM树中移除,而v-show则还会存在于DOM树中(只是添加了style="display none"属性),因此,为了避免程序中频繁的创建移除现象出现,尽量使用v-show为好!
9.列表渲染
v-for="item,index in arr";{{item}} {{index}}
将data中定义的arr数组内容,取出渲染到页面中对应标签中;
添加方法:arr.push(item);
删除方法:arr.splice(index,1);index:要删除的数据的下标,1:要删除的数量;
注意:数组的删除不要使用index(角标)操作,使用提供的push,splice方法即可!
10.对象渲染
v-for="value,key in person";{{value}} {{key}}
注意:如果想要在对象的渲染列表中添加一个属性是不会刷新的!!!
需要使用set方法,如下:
Vue.set(this.person,'tele',this.input)
