前言
此文章主要用来记录VUE学习路线以及学习过程中的思考。以便回顾复习。
一、常用模板语法
1.第一个vue程序
类似于Jquery,将其引入html文档中,将某个标签作为vue标签使用时,则可以new一个新的vue对象,利用el指明id名,利用data表明想让此标签显示什么内容:然后使用简洁的模板语法将数据渲染到页面上。
2.el挂载点
el支持各类除html和body的标签,
el挂载点可以是任意选择器
vue实例的作用范围:el命中的元素+内部的后代元素
3.data属性
Vue中用到的数据定义在data
data中可以写复杂类型的数据
4.内容绑定、实例绑定
1.v-text: 设置 标签的内容,默认写法会替换全部内容,使用{{}}替换指定内容。
<div class="app">
<h2 v-text='messages'></h2>
{{message}}
</div>
var vue=new Vue(
{
el:'.app',
data:{
message:'hellos',
messages:'hell'
}
}
)
2.v-html设置元素的innerHTML,可以解析html结构。
3.v-on用于为元素绑定事件v-on:click即绑定双击事件。 也可以利用@click绑定click事件。绑定的方法定义在methods属性当中。
此外可以在绑定事件的时候传递自定义参数,或者事件修饰符。
传递参数的方法很简单就是直接为它绑定某事件的时候带上参数,然后再methods当中定义函数的时候也是带参数的形式。而事件修饰符比如 @keyup.enter 即采用点语法表明要采用的事件。
4.综合应用计数器:
<div class="app">
<button v-on:click='add' >+</button>
<a v-text='message'></a>
<button v-on:click='sub'>-</button>
</div>
var vue=new Vue(
{
el:'.app',
data:{
message:1
},
methods:{
add:function()
{
this.message+=1
},
sub:function()
{
this.message-=1
}
}
}
)
总结:在VUE中,datastate,methods更改state的函数集合(所以this指定具体data),el为挂载点(保存自身+子代所有数据)
5.显示切换、属性绑定
1.v-show:指令表示的值最终会被解析为bool类型,可以控制标签是否存在。
<h1 v-show='false'>555</h1>
本质为切换元素的display值。
2.v-if:与v-show类似,根据表达式的真假,切换元素的显示隐藏。唯一不同的就是它是直接控制节点是否在dom树当中,当表达式为true元素存在于dom树、反之从dom树中移除。
3.v-bind:用来为节点设置属性,①v-bind:attribute=‘表达式’,或者②:attribute=‘表达式’
EG:为元素添加类名的方法一利用三元表达式
<img style="width: 200px; height: 100px;" :class="isShow?'active':' '" :src='imgSrc'>
<button @click='toggle'></button>
利用对象:
<img style="width: 200px; height: 100px;" :class="{active:isShow}" :src='imgSrc' >
<button @click='toggle'></button>
4.综合应用:图片切换,该demo主要功能为实现点击按钮切换图片。
实现思路:
<div class="app">
<button @click='add' v-show='index!==imgSrc.length-1' >+</button>
<img style="width: 200px; height: 100px;" :src='imgSrc[index]' >
<button @click='sub' v-show='index!==0'>-</button>
</div>
var vue=new Vue(
{
el:'.app',
data:{
index:0,
imgSrc:['https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/189dd51f92df29dc1c68f683ad421bee.jpg?w=2452&h=920',
'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5f20a62c3d5b3d6806bd51ab6c5dd12.jpg?w=632&h=340',
'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8a43378b96501d7e227a9018fe2668c5.jpg?w=632&h=340',
'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/793913688bfaee26b755a0b0cc8575fd.jpg?w=632&h=340']
},
methods:{
add:function()
{
this.index+=1
},
sub:function()
{
this.index-=1
},
}
}
)
利用数组存储数据,index记录数组下标值。
5.列表循环、表单元素绑定
1.v-for:用于生成列表结构的元素。采用以下语句可以实现。
<div class="app">
<ul>
<li v-for='(item,key) in Obj'>
{{item.name}}
</li>
</ul>
var vue=new Vue(
{
el:'.app',
data:{
index:0,
Arr:['你好','快乐','开心'],
Obj:[{name:'sss'},
{name:'aaa'}]
}
}
)
v-for指令特点如下
2.v-model:获取和设置表单元素的值(双向数据绑定)更改两边数据的任意一边都会同步更新值。
如下,就是将 message实现了双向绑定。