文章目录
值操作语法
Mustache 胡须语法
双大括号引用vue变量中的变量值
message可能是data中的值也可能是计算属性方法
{
{message}} 单取值
{
{message+message}} 运算
{
{message}} {
{message}} 多个变量取值
v-once
加了v-once属性的标签，数据改变不会刷新dom，停止响应式
<div id='app-7'>
<a href="" v-once>{
{message}}</a>
<a href="">{
{message}}</a>
</div>
v-for 遍历数据
html
<div id="app-3">
<h1>3.列表例子</h1>
vue列表对象.data.list.push();可以向数组中添加数据
vue列表对象.data.list.shift(2);可以移除指定的数据，不传参默认删除最后一个
<ol>
<li v-for="item in list">
{
{item}}
</li>
<li v-for="item in list1">
姓名：{
{item.name}} 年龄：{
{item.age}}
</li>
</ol>
</div>
vue
var app3 = new Vue({
el:"#app-3",
data:{
list:["刘","关","张","赵","黄"],
list1:[
{'name':"name-1","age":12},
{'name':"name-2","age":13},
{'name':"name-3","age":14},
{'name':"name-4","age":15},
]
}
})
v-html 直接当作html加载进入
html
<div id='app-8'>
<h1>8.直接当作html加载进入</h1>
<p v-html="url"></p>
</div>
vue
var app8 = new Vue({
el:'#app-8',
data:{
url:'<a href="http://www.baidu.com">百度一下</a>
}
})
v-pre 不经过编译直接添加进入dom节点
html
<div id='app-9'>
<h1>9.不经过编译直接添加进入dom节点</h1>
<p v-pre>{
{url}}</p>
</div>
p标签会直接显示{ {url}}，不会显示vue中的data值
v-cloak 斗篷
vue未执行绑定的js则不显示该dom节点。防止html加载了vue逻辑还未执行导致界面有延迟
<div id='app-10'>
<h1>10.</h1>
<p v-cloak>{
{meaasge}}</p>
</div>
动态绑定语法
再vuedom(也叫做模板)或对象中如果出现集合或者数组，key会被当为对象如果不是对象则当作字符串而value会被当成对象只有加’'才可以被当作字符串
例如：
<li :class="[item.name,'app12-list']"></li>
v-bind 绑定vue值和属性
v-bind:title 可以使用语法糖 :title
<div id="app-1">
<h1>2.鼠标悬停title</h1>
<span :title="message">
鼠标悬停查看绑定的内容
</span>
</div>
动态绑定并切换class
html
也可以在methods中写方法，将json返回，但使用变量的时候需要加this
<div id='app-11'>
<h1>11.动态绑定并切换class</h1>
<p v-bind:class="{a:isRed,b:isGreen}">{
{message}}</p>
</div>
vue
var app11 = new Vue({
el:'#app-11',
data:{
isRed:false,
isGreen:false,
message:"文本内容"
}
})
setTimeout(function(){
app11.isRed = true;
},2000)
setTimeout(function(){
app11.isRed = false;
app11.isGreen = true;
},4000)
v-on用法
html
注释部分也可以根据名称直接调用vue对象methods中的方法
<div id="app-5">
<h1>5.计数器</h1>
click中可以输入直接运行的代码，但是复杂情况不建议这样写，逻辑很容易被忽略也不美观
<p v-html=number></p>
<button v-on:click="number++">
<!-- <button v-on:click="app5Click"> -->
+
</button>
<button v-on:click="number--">
-
</button>
</div>
vue
var app5 = new Vue({
el:"#app-5",
data:{
number:0
},
methods:{
app5Click:function(){
this.number+=2
}
}
})
生成列表并且点击切换颜色
html
<div id='app-12'>
<h1>12.列表点击换颜色</h1>
<ul>
<li :class="[item.name,'app12-list']" v-for="(item,index) in items" v-on:click="changeColor(index)">{
{item.name}}</li>
</ul>
</div>
vue
var app12 = new Vue({
el:'#app-12',
data:{
items:[
{'name':"name-1","age":12},
{'name':"name-2","age":13},
{'name':"name-3","age":14},
{'name':"name-4","age":15},
]
},
methods:{
changeColor:function(index){
var list = document.getElementsByClassName("app12-list");
for (let index = 0; index < list.length; index++) {
const element = list[index];
element.style.color='black';
}
const element = document.getElementsByClassName(this._data.items[index].name);
element[0].style.color='red';
}
}
})
v-model
text
将input和vuedata中的message绑定，这是双向绑定input输入值修改也会同步修改vue data中的message的值
radio button
如果是单选框则v-model对应值 例如 message：“男”
check box
如果是多选框则v-model对应数组 例如message：[‘男’，‘变性’]
select
如果是多选框则v-model对应数组 例如message：[‘香蕉’，‘橘子’]github 例子地址
https://github.com/1142235090/study_vue