.png "管理")
vue.js（一）
之前看过一点vue.js但是知识点没做记录，现在也差不多不记得了，今天把以前看过的翻一遍，顺便提炼一下知识点
注意：下面的所有与vue相关的标签、指令都是写在id="app"的div之内的。
1.vue对象的写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script >
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
浏览器显示：
我们在控制台输入一些命令，看他的变化：
看到这，你应该意识到，我们可以通过js来改变这个vue对象的变量值，从而改变浏览器窗口中页面内容的显示。
2.指令系统
先贴上相关指令的用法，后面会对其中部分指令作详解。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
<p v-once>这个将不会改变: {{ message }}</p>
<p v-bind:title="message">绑定了title属性</p>
<p v-if="seen">if语句</p>
<p v-bind:id="message">绑定了id</p>
<a v-bind:href="message">绑定了href</a>
<p>输出html: <span v-html="rawHtml"></span></p>
<p>这里用computed属性实现对message值的反转：{{reversedMessage}}</p>
<p class="static" v-bind:class="{ active: isActive, textdanger: hasError }">根据对象的vaule值绑定class(内联写法)</p>
<p class="static" v-bind:class="classObject">根据对象的vaule值绑定class(Object写法)</p>
<p v-bind:style="{ color: activeColor, fontSize: fontSize }">Hello World(内联写法)</p>
<p v-bind:style="styleObject">Hello World(Object写法)</p>
<input v-model="message" placeholder="edit me">
<p>v-model实现双向数据绑定: {{ message }}</p>
<ol>
<li v-for="todo in todos">
<ol>
<li v-for="item in todo.list">
{{item.key}}
</li>
</ol>
</li>
</ol>
<button v-on:click="reverseMessage">绑定了单击事件的methods</button>
<button v-bind:disabled="seen">绑定了disabled属性</button>
</div>
<script >
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
seen:true,
rawHtml:"<a style='color:red' href='##'>content</a>",
isActive:true,
hasError:false,
classObject: {
active: true,
textdanger: false
},
activeColor: 'red',
fontSize: '18px',
styleObject: {
color: 'red',
fontSize: '13px'
},
todos: [
{ name: '学习 JavaScript',list:[{key:"键1",value:"值1"},{key:"键2",value:"值2"}] },
{ name: '学习 Vue' ,list:[{key:"键1",value:"值1"},{key:"键2",value:"值2"}] },
{ name: '整个牛项目',list:[{key:"键1",value:"值1"},{key:"键2",value:"值2"}] }
]
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join(''); }
},
computed: {
//默认是getter方法
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
3.计算属性：computed。
上面我们可以看到，通过方法methods和计算属性computed都可以实现对数据message值的反转的操作。
但是，注意了，methods属性里面的方法不能有返回值且前台不能够直接调用，不然前台显示function () { [native code] }
methods: { reverseMessage: function () { return this.message.split('').reverse().join(''); } }, 前台调用： <p>这里用methods属性实现对message值的反转：{{reverseMessage}}</p>
前台显示：
所以，一般methods方法用来处理事件而不是用来显示文本，对于显示文本，一般用计算属性来解决computed。像下面这样：
computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } }
<p>前台调用全名：{{fullName}}</p>
<p>前台调用firstName：{{firstName}}</p>
（注意：data中只定义了firstName和lastName）
然后我们在控制器或者js中执行“setter”方法：
app.fullName="Jason Chen";
此时，data中的firstName和lastName都将发生改变，而这一切，在这里都不作记录了。。。
重点来了：
计算属性是会产生缓存的，计算属性是基于它们的依赖（在上面的例子中计算属性fullName的getter方法是依赖firstName和
lastName）进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要依赖变量的值还没有发生
改变，多次访问fullName计算属性会立即返回之前的计算结果，而不必再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我
们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！有了缓存之后直接获取之前getter
方法的缓存，而不用再次执行A的getter方法了。
4.true和false
就像上面看到的那样，很多时候我们需要定义一个是非值变量，来作用于if语句或者class绑定值，我发现书写时会出现三种方式
data：{ seen1:true, seen2:'任意字符', seen3:任意字符 }
对于第一种，vue会当做“真”值处理；对于第二种，vue也会当做“真”值处理；对于第三种，当然是。。。。。报错！
5.变量的声明
对于vue变量的声明，根据变量名里有无特殊符号要作以下处理（单引号）：
data：{ 'text-content':'这里是变量的值', textcontent:'这里也是变量的值' }
6.v-if指令
v-if作为一个指令，必须写在一个标签上
<div v-if="seen1"> <h1>hello world</h1> <h3>hello vue</h3> </div> <template v-if="seen1"> <h1>hello world</h1> <h3>hello vue</h3> </template>
上面两者的区别就是，DOM渲染的时候，第一个会显示div标签，而第二个不会显示template标签
<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else> Not A/B </div>
if-else语句浅显易懂，无须多作解释。下面引入key来处理vue复用元素的做法
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address"> </template>
当我们动态改变loginType的值的时候，看似会出现不同的label和input，实际上并没有重新渲染DOM，
我们在第一个input输入了值之后，再切换loginType值之后，之前输入的值会出现“第二个”input之中，所以这实际上是复用了DOM元素，
在切换状态的时候，仅仅对元素内容作了修改，那么就会存在一个问题，当我们输完Username之后，切换到Email输入界面，
这里的input框由于不是重新渲染的，那么就会默认保留之前输入的Username值，那要怎么处理呢？
<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>
这样，每次切换时，用key标识的输入框都将被重新渲染。
v-if是惰性的，只有在条件为真时，DOM才会渲染，如果初始化的时候条件为假，DOM是不会渲染的，直到条件为真。
相对应的有个v-show指令，这个指令无论条件为真为假都会渲染DOM，只是会根据条件改变display属性的值。
