在慕课网学习了vue,跟着老师敲代码,把代码整理出来,方便以后看。
vue.js基本使用
官网
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
基本指令
v-model实现数据双向绑定,采用{{XXXX}}的表达方式显示数据。js部分通过id进行元素绑定,data即实例对象,vm.a等价于vm.$data.a.
<div id="app">
<div>
<input type="text" v-model="name">
<span>你的名字是:{{name}}</span>
</div>
<div>
<input type="text" v-model="age">
<span v-show="age">你的年龄是:{{age}}</span><!-- 元素永远存在,隐藏而已 -->
<span v-if="age">你的年龄是:{{age}}</span><!--dom里元素被删除 -->
</div>
</div>
var app = new Vue({
el: '#app',
data:{
name:'A',
age:'12',
}
})
v-model指令
下列五个使用同一个js
var app = new Vue({
el: '#app',
data:{
name:'whh',
sex:'female',
like:['read'],
article:'afasfakshflakfhakfaljk',
from:2,
dest:[]
}
})
input绑定
input里面的数据改动,{{name}}里面的数据实时改动。这就是数据双向绑定
<div id="app">
<input type="text" v-model.lazy="name"></input> {{name}} .trim去空格
.number字符串10转数字10
</div>
单选框/复选框绑定
单选框value的值要对应js里面的值
<div id="app">
<label>男<input v-model="sex" type="radio" value="male"></input></label>
<label>女<input v-model="sex" type="radio" value="female"></input></label>
<label>看书<input v-model="like" type="checkbox" value="read"></input></label>
<label>游泳<input v-model="like" type="checkbox" value="swim"></input></label>
<br>{{like}}</br>
</div>
下拉框绑定
<div id="app">
<div>你来自哪里</div>
<select v-model="from">
<option value="1">玉家沟</option>
<option value="2">背背山</option>
</select>
{{from}}
<div>你要去哪里</div>
<select v-model="dest" multiple>
<option value="1">玉家沟</option>
<option value="2">背背山</option>
<option value="3">黑龙江</option>
<option value="4">桂林</option>
</select>
{{dest}}
</div>
v-for指令
html
用三元表达式来避免discount不存在时出现的问题
<div id="app">
<ul>
<!-- <li v-for="food in foodList">{{food}}</li> -->
<li v-for="food in foodList">
{{food.name}}:${{food.discount ? food.price *food.discount:food.price}}
</li>
</ul>
</div>
var app = new Vue({
el: '#app',
data:{
// foodList:['葱','姜','蒜'],
foodList:[
{
name:'葱',
price:10,
discount:.8,
},
{
name:'姜',
price:5,
discount:.5,
},
{
name:'蒜',
price:4,
},
]
}
})
v-if指令
<div id="app">
<div v-if="role == 'admin' || role == 'super_admin'">
管理员你好
</div>
<div v-else-if="role == 'hr'">
你好
</div>
<div v-else>
您没有权限查看此页面
</div>
</div>
var app = new Vue({
el: '#app',
data:{
role:'super_admin'
}
})