** 使用引入Vue.js方式
知识点
声名:
<div class="app">{{content}}</div>
var wkApp = new Vue({
el:'.app',
data:{
content:'hello world'
}
});
-
el :Vue实例就在绑定页面上的元素内创建,值和jq类似,若是id用#,class用点(.)。
-
data : 存储与页面绑定对应的数据,key值就是与页面绑定的变量名
在组件中,data必须用函数方式。 -
Vue组件外获取组件内值得方式:
组件名.$data.变量名
或组件名.变量名
eg:wkApp.$data.content
或wkApp.content
-
Vue每一个组件,都是一个Vue的实例。
-
区别:传统的核心是操作dom,Vue是操作数据。
常用模板(显示内容)
{{}}
插值表达式 <div> {{msg}}</div>
v-text
显示内容 <div v-text="msg"></div>
v-html
显示html片段内容 <div v-html="msg"></div>
v- 开头的指令,后面的值都是js表达式
常用指令
-
v-model
: 双向绑定,常用在input。 -
v-bind
:
属性绑定,可简写为:
。如:v-bind:class
可简写为:class
。 -
v-bind:class
:
样式绑定:
1.对象语法
v-bind:class="{a:b}"
a: class名
b: js表达式变量名
<div v-on:click="changeClassClick" v-bind:class="{classBlock:classbl}">Class变色A</div>
changeClassClick:function(){
this.classbl = true;
},
2.数组语法
:class=[a,b]
a,b 是 js表达式变量名,如:class=[‘activated’],即:class=‘activated’
也可以用三目表达式::class=[classbl?'classBlock':'classColor']
<div @click="changeClassBClick" :class=[classblB,classclB]>Class变色B</div>
changeClassBClick:function(){
this.classblB = 'classBlock';
this.classclB = 'classColor';
}
v-bind:style
也分为对象、数组两种方式,和class大同小异。
styleA: 是一个变量,内容是对象。
<div :style="styleA" @click="styleAClick">style变色A</div>
<div v-bind:style=[styleB,styleC]>style变色B</div>
styleAClick:function(){
this.styleA = {'font-size':'18px','color':'pink'};
this.styleB = {'font-size':'10px'};
this.styleC = {'font-weight':'bold'};
}
<template>
元素当做不可见的包裹元素。
v-for
:
- 在2.2.0+ 的版本,当在组件中使用 v-for 时,key 必写,key值可以写index下标值,但会影响一点效率,一般可以用后端返回数据中的id作为key值。
- v-for with v-if,当它们处于同一节点,v-for 的优先级比 v-if 更高,先执行for再执行if,相当于for在外层,if在for循环的内层。
<li v-for="(item,index) of list" :key="index">{{item}},{{index}}</li>
性能最优:加key值,并尽量不用index值,可以用后端数值中的id
也可以用v-for="item in list"
index指代下标;in或of关键字都可以。
而of和in的区别,官网是这么说的“你也可以用 of 替代 in 作为分隔符,因为它是最接近 JavaScript 迭代器的语法”
v-show
: 是否显示,为false时display:none;
事件绑定
v-on
如在页面上绑定v-on:click="liClick"
,在vue实例中需添加对应的liClick事件:
(v-on:click
可以简写为@click
)
- 事件方法都写在
methods
中,在methods中获取data中的变量,this.变量名
methods:{
liClick:function(){
alert('liClick');
}
}
v-if
: 是否显示,为false时会remove掉dom节点
<template>
元素当做不可见的包裹元素,在页面渲染时不会渲染这一层的dom标签。- key值
现象:在input框中输入内容,修改isShow的值后,input的值并未清空。
解决:<input key="username">
这是因为Vue的渲染机制,官网所说“Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。”
<template>
<a v-if='isShow===true' v-bind:title="title">{{header}} <input /> </a>
<a v-else-if='isShow===1'>else if <input /></a>
<a v-else>else <input /></a>
</template>
列表页面数据渲染的方式
数组
直接使用list[i] = ‘abc’; 的方式,无法将修改后数组的值同时在页面上渲染出来。
1. 通过变异方法
push(), pop(), shift(), unshift(), splice(), sort(), reverse()
Vue中的变异方法:
例:
app.list.splice(0,0,'nihao'); //修改list的第一个数组的值为‘nihao’
即第一个参数是要修改的值的下标,第二参数是待删除的值得下标,第三个值是待修改的值的内容。具体参数用法和js的一样。
2. 通过修改整个值的内容
app.list = ['你','好'];
3. 通过set方法
Vue.set(app.$data.list,0,'文');
app.$set(app.$data.list,1,'不是');
第一个参数是数组,第二个参数是要修改的值得下标,第三个参数是要修改的值的内容。
对象
先创建个对象,直接将刚才的list修改为对象,v-for一样可以循环显示出来。
1. 通过修改整个值的内容
app.$data.list = {'a0':'z','a1':'w','a2':'k'}
2. 通过set方法
Vue.set(app.$data.list,'a0','scorpio')
app.$set(app.$data.list,'a1','scorpio')
MVVM模式
Vue面向数据,主要操作M层,M层是data的数据操作;
M层:数据层
V层:页面
VM层:Vue去实现的渲染的
附 demo:
<div id="root">
<h6>
<template>
<a v-if='isShow===true' v-bind:title="title">{{header}}<input placeholder="first" /> </a>
<a v-else-if='isShow===1'>else if <input placeholder="second" /></a>
<a v-else>else <input placeholder="third" /></a>
</template>
<button @click="headerClick">{{isShowBtn}}</button>
</h6>
<input v-model="inputValue"/>
<button @click="submitClick">提交</button>
<div v-on:click="changeClassClick" v-bind:class="{classBlock:classbl}">Class变色A</div>
<div @click="changeClassBClick" :class=[classblB,classclB]>Class变色B</div>
<div :class=[classbl?'classBlock':'classColor']>Class变色C</div>
<div :style="styleA" @click="styleAClick">style变色A</div>
<div v-bind:style=[styleB,styleC]>style变色B</div>
<ul>
<li v-for="(item,index) of list" keys="index" v-on:click="liClick">{{item}},{{index}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:'#root',
data:{
header:'start',
list:[],
isShow:true,
inputValue:'',
inputValue2:'',
isShowBtn:'隐藏',
title:'标题',
classbl:false,
classblB:'',
classclB:'',
styleA:'',
styleB:'',
styleC:''
},
methods:{
liClick:function(){
alert(this.inputValue);
},
headerClick:function(){
this.isShow = !this.isShow;
this.isShowBtn = this.isShowBtn=='显示'?'隐藏':'显示';
},
submitClick:function(){
this.list.push(this.inputValue);
this.inputValue = '';
},
changeClassClick:function(){
this.classbl = true;
},
changeClassBClick:function(){
this.classblB = 'classBlock';
this.classclB = 'classColor';
},
styleAClick:function(){
this.styleA = {'font-size':'18px','color':'pink'};
this.styleB = {'font-size':'10px'};
this.styleC = {'font-weight':'bold'};
}
}
});
setTimeout(function(){
app.$data.data = 'learning';//外部获取值
},1000);
</script>
<style>
.classBlock{
background: plum;
width:160px;
height: 30px;
}
.classColor{
color: wheat;
}
</style>