vue基础笔记

1：v-bind绑定变量（字符串的一部分）

<div id="app-9">
<p v-bind:id="'list-'+num">
v-bind绑定一部分变量
</p>
</div>


var app9 = new Vue({
el: "#app-9",
data: {
num: 1
}
})

2： v-on:click 简写 @click


.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.native - 监听组件根元素的原生事件。


3: 调用计算表达式如果message不变，将调用缓存

<div id="app-1">
<p>{{getDate}}</p>
</div>

var app1 = new Vue({
el: "#app-1",
data: {
message: "日期"
},
computed: {
getDate: function(){
return this.message + ": " + Date.now()
}
}
})

app1.getDate 多次调用时，调用的是缓存.如果message的值改变，那么app1.getDate返回值才会更新

4: computed中添加set和get方法自定义赋值和读取表达式

<div id="app-1">
<p>{{fullName}}</p>
</div>

var app1 = new Vue({
el: "#app-1",
data: {
firstName: "zhang",
lastName: "cai yan"
},
computed: {
fullName: {
get: function(){
return this.firstName + " 1 " + this.lastName
},
set: function(newValue){
this.firstName = newValue.split(" ")[0]
this.lastName = newValue.split(" ")[1]
}
}
}
})

5: watch

<div id="app-1">
你来自什么星球： <input v-model="question"><br/>

<span>{{answer}}</span>
</div>

var app1 = new Vue({
el: "#app-1",
data: {
question: "",
answer: "请回答问题...."
},
watch: {
question: function(){
this.answer = "回答中...."
}
}
})

6: v-bind:class 传入对象

1):
<div id="app-1">
<div class="star" v-bind:class="{active: isActive, current: isCurrent}">对象语法</div>
</div>

var app2 = new Vue({
el: "#app-1",
data: {
isActive: true,
isCurrent: true
}
})

2):
<div id="app-1">
<div class="name" v-bind:class="classObject">对象语法</div>
</div>


var app1 = new Vue({
el: "#app-1",
data: {
classObject: {
'active': true,
'text-danger': true
}
}
})

3):
<div id="app-1">
<div class="name" v-bind:class="classObject">对象语法</div>
</div>


var app1 = new Vue({
el: "#app-1",
data: {
classObject: {
'active': true,
'current': true
}
},
computed: {
classObject: function(){
return{
active: this.isActive,
current: this.isCurrent
}
}
}
})


4)：

<div id="app-1">
<div class="name" v-bind:class="[active, {blue: isBlue}, isCurent ? 'current' : '']">对象语法</div>
</div>

var app1 = new Vue({
el: "#app-1",
data: {
active: 'active',
isBlue: true,
isCurrent: true
}
})


7: 组件 注意: 使用组件时，组件添加了class样式后，会添加到组件中的模板class，如下

<div id="app-2">
<my-template class="blue" v-bind:class="{green: isGreen}"></my-template>
</div>

Vue.component("my-template", {
template: "<p class='red' style='color:red;'>组建</p>"
})

var app2 = new Vue({
el: "#app-2"
})

8: v-bind:style 和 v-bind:class的使用方式差不多，对象中有数组、hash形式，并且在数组中可以使用表达式，不一样的是v-bind:class中的hash是样式名称对应布尔型数据，而v-bind:style中的hash是style的样式名称和值的对应，class中数组的元素是class样式名称的变量，而style中的数组元素是对象，class中的样式对象是直接添加。


<div id="app-2">
<p v-bind:style="[sizeObject, weightObject, {color: red, height: height+'px'}]">对象</p>
</div>


var app1 = new Vue({
data: {
red: 'green',
height: 25,
sizeObject: {
fontSize: '20px'
},
weightObject: {
fontWeight: 'bold'
}
},
el: "#app-1"
})

9: v-if、v-else-if、v-else、v-show,v-show和v-if的区别是，v-if如果为true才渲染，false不会渲染，v-show是display，无论是否为true都会渲染

<div id="app-3">
<p v-if="isSmall">small</p>
<p v-else-if="isMiddle">middle</p>
<p v-else>big</p>
</div>

var app3 = new Vue({
el: "#app-3",
data: {
isSmall: false,
isMiddle: true
}
})

10: vue尽可能复用元素，这样就可以提高渲染效率，如果不要复用，而强制重新渲染。

<div id="key-example" class="demo">
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
<button v-on:click="toggleLoginType">切换</button>
</div>

new Vue({
el: '#key-example',
data: {
loginType: 'username'
},
methods: {
toggleLoginType: function () {
return this.loginType = this.loginType === 'username' ? 'email' : 'username'
}
}
})


11: v-for: 数组、对象


1）<li v-for="item in items">{{item.message}}</li>

2）<li v-for="(item, index) in items">{{index}} {{item.message}}</li>

3）
<li v-for="item in object"> {{item}}</li>
<li v-for="(value, key) in object"> {{key}} {{value}}</li>
<li v-for="(value, index, key) in object">{{index}} {{key}} {{value}}</li>

var app1 = new Vue({
el: '#app-1',
data: {
object: {
firstName: "zhang",
lastName: "san"
}
}
})

4) <li v-for="n in 10">{{n}}</li>

var app1 = new Vue({
el: '#app-1',
data: {
object: {
firstName: "zhang",
lastName: "san"
}
}
})

5) <li v-for="n in newNumbers">{{n}}</li>

var app1 = new Vue({
el: '#app-1',
data: {
numbers: [1,2,3,4,5]
},
computed: {
newNumbers: function(){
return this.numbers.filter(function(number){
return number % 2 === 0
})
}
}
})

12: 数组中添加的方法： push, unshift, pop, shift, splice, slice, filter, sort, reverse, concat

直接使用下标添加数组元素，Vue无法检测到数组的变动,可以使用set方法来实现Vue.set(app1.todos, 9, "b")

13: v-mode 实现文本框数据双向绑定

1):
<div id="app-1">
<input type="checkbox" id="checkbox" v-model="checked">
<p>{{checked}}</p>
</div>

var app1 = new Vue({
el: "#app-1",
data: {
checked: true
}
})

2): 绑定为一个数组

<div id="app-1">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>

var app1 = new Vue({
el: "#app-1",
data: {
checkedNames: []
}
})

3): 绑定到单选按钮中(radio)

<div id="app-2">
<input type="radio" v-model="picked" value="One">
<label>One</label>
<br/>
<input type="radio" v-model="picked" value="Two">
<label>Two</label>
<br/>
<span>Picked: {{picked}}</span>
</div>


var app2 = new Vue({
el: "#app-2",
data: {
picked: "One"
}
})


4) select下拉框绑定值


<div id="app-1">
<select v-model='selectValue'>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<span>selectValue: {{ selectValue }}</span>
</div>

var app1 = new Vue({
el: "#app-1",
data: {
selectValue: 'c'
}
})


5) multiple select

<div id="app-1">
<select v-model='selectValue' multiple>
<option value="a" v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
</select>
<span>selectValue: {{ selectValue }}</span>
</div>


var app1 = new Vue({
el: "#app-1",
data: {
selectValue: ['C'],
options: [
{text: "One", value: "A"},
{text: "Two", value: "B"},
{text: "Three", value: "C"}
]
}
})

6) 修饰符
number 自动转换为数字
trim 自动过滤两边的空格

<div id="app-1">
<input v-model.number="msg">
<span>msg: {{ msg }}</span>
</div>

var app1 = new Vue({
el: "#app-1",
data: {
msg: "111"
}
})

typeof app1.msg

14: 组件 全局和局部,使用模板可以直接使用模板名称或者通过is指定，组件中可以使用Vue构造器中的大多数选项，但是使用data的时候一定要是函数。

1)
全局：
<div id="app-1">
<my-component></my-component>
</div>

Vue.component("my-component", {
template: "<div>模板</div>"
})

var app1 = new Vue({
el: "#app-1",
})


2)
局部：

<div id="app-2">
<my-component2></my-component2>
或
<div is="my-component2"></div>
</div>


var app2 = new Vue({
el: "#app-2",
components: {
"my-component2": {
template: "<div>模板2</div>"
}
}
})


3) 组件中使用data

<div id="app1">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>


Vue.component('my-component', {
template: '<button v-on:click="counter+=1">{{name}}: {{ counter }}</button>',
data: function(){
return {
name: "点击加一",
counter: 0
}
}
})

new Vue({
el: '#app1'
})

4) props传递参数

<div id="app1">
<my-component v-bind:message="message1" v-bind:count="count1"></my-component>
<my-component v-bind:message="message2" v-bind:count="count2"></my-component>
</div>


Vue.component('my-component', {
template: '<button v-on:click="counter+=count">{{message}} {{counter}}</button>',
props: ["message", "count"],
data: function(){
return {
counter: 0
}
}
})

new Vue({
el: '#app1',
data: {
message1: "点击加一",
message2: "点击加二",
count1: 1,
count2: 2
}
})

5) 自定义prop中的type类型，默认值 String、Number、Boolean、Function、Object、Array

数组／对象的默认值应当由一个工厂函数返回

<div id="app1">
<input v-model="message">
{{message}}
<my-component v-bind:message="message" v-bind:message1="message1" v-bind:count="count1"></my-component>
</div>


Vue.component('my-component', {
template: '<button v-on:click="counter+=count">{{message}} {{message1}} {{counter}} {{names}} {{user.name}}</button>',
props: {
message: String,
message1: [String, Number],
count: {
type: Number,
default: 1
},
names: {
type: Array,
default: function(){
return [1,2,3]
}
},
user: {
type: Object,
default: function(){
return {
name: "zhang san"
}
}
}
},
data: function(){
return {
counter: 0
}
}
})

new Vue({
el: '#app1',
data: {
message: "",
message1: "点击加一",
count1: 1
}
})