vue学习笔记（1）

在慕课网学习了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'
  }
})