vue基础
-
{{}} 显示js界面传过来的数据
-
v-bind 绑定提示信息
-
v-if 条件语句
-
v-for 绑定数组数据
-
v-on 添加一个事件监听器，通过它可以调用Vue实例中定义的方法
-
v-model 表单输入和应用状态之间的双向绑定
-
Vue.component() 定义组件
-
v-html 用于输出真正的html
-
v-pre 用于显示{{}} 而不进行替换，可以跳过这个元素和它的子元素的编译过程
双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue learn</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="name" placeholder="name">
<h1>hello,{{name}}</h1>
</div>
<script src="index.js"></script>
</body>
</html>
var app = new Vue({
el:'#app',
data:{
name: ''
}
})
可以通过app.$el 访问该元素，Vue提供了很多的属性和方法都可以通过$开头
一个计时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue learn</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{date | formateDate()}}
</div>
<script src="index.js"></script>
</body>
</html>
var padDate = function (value) {
return value < 10 ? '0' + value : value;
};
var app = new Vue({
el: '#app',
data: {
date:new Date()
},
filters:{
formateDate:function (value) {
var date = new Date(value);
var year = date.getFullYear();
var month = padDate(date.getMonth()+1);
var day = padDate(date.getDate());
var hours = padDate(date.getHours());
var minuates = padDate(date.getMinutes());
var seconds = padDate(date.getSeconds());
return year + '年' + month + '月' + day + '日' + " " + hours + ":" + minuates + ":" + seconds;
}
},
mounted:function () {
var _this = this;
this.timer = setInterval(function () {
_this.date = new Date();
},1000);
},
beforeDestroy: function () {
if(this.timer){
clearInterval(this.timer);
}
}
})
在{{}} 中不但可以绑定属性值，还可以使用JavaScript表达式进行简单的运算、三元运算等
<div id="app">
{{number/10}}</br>
{{is ? 'yes':'no'}}</br>
{{text.split('').reverse().join('')}}</br>
</div>
var app = new Vue({
el:'#app',
data:{
number: 100,
is: false,
text: 'Martin'
}
})
v-if 用法
当其表达式的值改变时，相应地将某些行为应用到DOM上
<div id="app" align="center">
<p v-if="show">show this message</p>
</div>
var app = new Vue({
el:'#app',
data:{
show:true
}
})
v-bind 用法
动态更新html元素的属性
<div id="app" align="center">
<a v-bind:href="url">link</a>
<img v-bind:src="imgUrl">
</div>
var app = new Vue({
el:'#app',
data:{
url:'https://www.baidu.com/',
imgUrl:'https://www.baidu.com/img/xinshouye_353af22a7f305e1fb6cfa259394dea9b.png'
}
})
v-on 用法
用来绑定事件监听器
<div id="app" align="center">
<p v-if="show">message</p>
<button v-on:click="handleClose">点击隐藏</button>
</div>
var app = new Vue({
el:'#app',
data:{
show:true
},
methods:{
handleClose:function () {
this.show = false;
}
}
})
语法糖
计算属性
如果表达式过长，或者逻辑更为复杂，就会变得臃肿，难以阅读和维护，这个时候可以使用计算属性进行改写，所有的计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果
<div id="app" align="center">
{{reversedText}}
</div>
var app = new Vue({
el:'#app',
data:{
text:'hello Martin'
},
computed:{
reversedText:function () {
return this.text.split('').reverse().join('')
}
}
})
计算属性还可以依赖多个Vue实例的数据，只要任一个数据变化，计算属性就会重新执行，视图也会更新。
计算属性不仅可以依赖当前Vue实例的数据，还可以依赖其它实例的数据。
<div id="app" align="center">
姓名：{{fullName}}
</div>
var app = new Vue({
el: '#app',
data: {
firstName:'Martin',
lastName:'yu'
},
computed: {
fullName:{
get:function () {
return this.firstName + " " + this.lastName;
},
set: function (newValue) {
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
})
计算属性缓存
methods 也可以实现和计算属性相同的效果，但是，计算属性是基于它的依赖缓存的，只有当它所依赖的数据发生变化时，它才会重新取值。而methods却是不同，只要重新渲染，它就会被调用，函数也会被执行。
v-bind 及 class 与style绑定
对象语法
<div id="app">
<div :class="{'active':isActive}"></div>
</div>
var app = new Vue({
el:'#app',
data:{
isActive:true
}
})
对象中也可以传入多个属性，来动态的切换class 。:class 可以与普通 class 共存，也可绑定计算属性。如果需要多个class 时，可以使用数组语法，给:class 绑定一个数组，应用一个class 列表
v-cloak
解决初始化慢导致页面闪动
v-once
定义它的元素或组件只渲染一次，包括元素或组件所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容。
v-if v-else-if v-else
添加key 值防止元素被复用
<div id="app">
<template v-if="type === 'name'">
<label>user name:</label>
<input placeholder="user name" key="name-input">
</template>
<template v-else>
<label>email:</label>
<input placeholder="email" key="email-input">
</template>
<button @click="handleToggleClick">switch type</button>
</div>
var app = new Vue({
el:'#app',
data:{
type:'name'
},
methods:{
handleToggleClick:function () {
this.type = this.type === 'name' ? 'email':'name';
}
}
})
v-show
v-show是改变元素的css属性display，当表达式为false时，元素会隐藏，元素内联样式为display:none
v-if 和 v-show的区别就是，v-show仅仅是简单的css样式切换，无论条件真与否，都会被编译，而v-if 是真正的条件渲染，它会根据表达式适当地销毁或重建元素及绑定的事件或子组件。
v-for
<div id="app">
<ul>
<li v-for="book in books">{{book.name}}</li>
</ul>
</div>
var app = new Vue({
el:'#app',
data:{
books:[
{name:'hello'},
{name:"world"},
{name:'yu'}
]
}
})
v-for的表达式支持一个可选参数作为当前项的索引，例如v-for="(book,index) in books"
数组更新
会改变原始数组：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
不会改变原始数组的：
filter()
concat()
slice()
购物车
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue learn</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-cloak align="center">
<template v-if="list.length">
<table>
<thead>
<tr>
<th></th>
<!--<th>选择</th>-->
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<!--<td><input type="checkbox" name="shopingCheck"></td>-->
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="handleReduce(index)" :disabled="item.count==1">-</button>
{{item.count}}
<button @click="handleAdd(index)">+</button>
</td>
<td>
<button @click="handleRemove(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<div>总价：￥ {{totalPrice}}</div>
</template>
<div v-else>购物车为空</div>
</div>
<script src="index.js"></script>
</body>
</html>
var app = new Vue({
el:'#app',
data:{
list:[
{
id:1,
name:'iphone 7',
price:5999,
count:1
},
{
id:2,
name:'iphone 8',
price:5888,
count:2
},
{
id:3,
name:'macbook pro',
price:18688,
count:1
}
]
},
computed:{
totalPrice:function () {
var total = 0;
for(var i=0;i<this.list.length;i++){
var item = this.list[i];
total+=item.price*item.count;
}
return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
}
},
methods:{
handleReduce:function (index) {
if(this.list[index].count ===1) return;
this.list[index].count--;
},
handleAdd:function (index) {
this.list[index].count++;
},
handleRemove:function (index) {
this.list.splice(index,1);
}
}
})
[v-cloak]{
display:none;
}
table{
border:1px solid #e9e9e9;
border-collapse: collapse;
border-spacing:0;
empty-cells:show;
}
th,td{
padding:8px 16px;
border:1px solid #e9e9e9;
text-align:left;
}
th{
background:#f7f7f7;
color:#5c6b77;
font-weight: 600;
white-space: nowrap;
}
单选按钮
<div id="app">
<input type="radio" :checked="picked">
<label>单选按钮</label>
</div>
var app = new Vue({
el:'#app',
data:{
picked:false
}
})
如果想要实现互斥的话可以通过使用v-model配合value 使用
<div id="app">
<input type="radio" v-model="picked" value="html" id="html">
<label for="html">html</label>
</br>
<input type="radio" v-model="picked" value="js" id="js">
<label for="html">javaScript</label>
</br>
<input type="radio" v-model="picked" value="css" id="css">
<label for="html">css</label>
</br>
<p>选择是：{{picked}}</p>
</div>
var app = new Vue({
el:'#app',
data:{
picked:'js'
}
})
复选按钮
