纯个人对vue2.x官方文档的学习，然后进行的一些总结
一、模板语法
<p>{{ number + 1 }}</p>//当number的值为1时，显示为2
<p>{{ ok ? 'YES' : 'NO' }}</p>//三元运算符，ok为true时，显示YES,为false时显示NO
<p>{{ message.split('').reverse().join('') }}</p>
//当message="hello"时，
//split('')切割为数组['h','e','l','l','o']
//然后reverse()反转数组为['o','l','l','e','h']
//最后join('')链接为字符串"olleh"
//显示为'olleh'
注意点1：插值只能是单个表达式，不能是语句或者其他
<p>{{var a = 1}}</p>
//不生效，var定义a是JS语句
<p>{{ if (ok) { return message } }}</p>
//同样是JS代码语句，切换为三元运算符才能生效
ok ? message : ""; //ok时输出message，否则的话为空注意点2：插值能够访问Math和Date的全局变量，不能在访问用户定义的全局变量。
二、指令
·1》v-html
用法：
<p> Using mustaches: {{ rawHtml }} </p>
<p> Using v-html directive: <span v-html="rawHtml"></span></p>
（rawHtml的值为:<span v-html="rawHtml">This should be red.）展示效果：
Using mustaches:<span v-html="rawHtml">This should be red.</span>
Using v-html directive:This should be red.2》v-bind
用法：绑定数据
1）切换布尔值改变样式
<button v-bind:disabled="isButtonDisabled">Button</button>当isButtonDisabled的值为true时，这个button 标签中会有disabled，将禁用这个button，当isButtonDisabled的值为null、undefined或是false时，就不会有disabled。
2）绑定参数
<a v-bind:href="url">...</a>这里的href是参数，与url绑定，v-bind可以简写为：，即
<a v-bind:href="url">...</a>
等同于
<a :href="url">...</a>3）绑定动态参数（vue2.6.0之后新增）
<a v-bind:[attributeName]="url"> ... </a>当attributeName的值为href时，那么这段代码等同于
<a v-bind:href="url">...</a>3》v-on
绑定事件
用法：
1）监听事件
<a v-on:click="doSomething">...</a>监听这个a标签的点击事件，点击a标签时，执行绑定的事件函数doSomething（）内的代码
2）监听动态事件
<a v-on:[eventName]="doSomething"> ... </a>当eventName的值为click时，等同于上面的代码
v-on：简写为@
<a v-on:click="doSomething"> ... </a>
等同于
<a @click="doSomething"> ... </a>
4》v-if
根据值的真假是否执行代码，当值为false时，不会执行任何操作，当值为true时才会执行
用法：
<p v-if="seen">现在你看到我了</p>展示效果为：
现在你看到我了//seen的值为true
当seen的值为false时，不会执行这段p标签操作三、计算属性和侦听属性
1》计算属性
模板语法插值内的语句需要进行计算时，不推荐直接在插值语句内直接计算，需要在计算属性内进行计算。
用法：
html代码
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>js代码
var vue = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vue 实例
return this.message.split('').reverse().join('')
}
}
})结果：
Original message: "Hello"
Computed reversed message: "olleH"此时的reversedMessage作为一个计算属性，会展示反转后message的内容，当message的内容改变时，展示的结果也是反转后的message。
注意点：
计算属性computed是有缓存的，是基于它们的响应式进行缓存的，相关响应式依赖发生改变时，才会重新进行计算。也就是只要message的内容不改变，重复执行reversedMessage都会返回缓存中保存的计算结果，每次返回的都是第一次计算的结果。
而使用函数方法也能得到计算属性相同的结果，区别在于使用函数方法每次都会重新计算，较计算属性消耗性能
html:
<p>Computed reversed message: "{{ reversedMessage() }}"</p>JS：
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}同样能够显示反转后的message，但是每次执行上面的html代码时都会重新计算一次。
2》侦听器watch
计算属性computed基本适用于绝大多数的情况，但是也需要一个自定义的侦听器。Vue提供了侦听器watch来响应数据的变化，watch可以在数据发生变化的时候执行异步操作或是开销更大的操作。
用法：（这个例子就是输入一个带？的句子，能够帮你随机做出一个yes或者是no的决定,只能识别英文的？，中文的无法识别）
html:
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>JS:
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var vue= new Vue({
el: '#watch-example',
data: {
question: '',//接收输入的值
//为操作时，p标签展示的内容
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 如果处于输入中时， `question` 发生改变，这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
},
created: function () {
// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。可以理解为防抖，当输入停止超过500毫秒时才会执行getAnswer函数
// 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
// 请参考：https://lodash.com/docs#debounce
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
},
methods: {
getAnswer: function () {
if (this.question.indexOf('?') === -1) {
//获取？的位置，未输入？时显示下面这条语句
//只能够识别英文的？,需要能够识别中文的可以换成这句
//if (this.question.indexOf('?') === -1 || this.question.indexOf('？') === -1) {
this.answer = 'Questions usually contain a question mark. ;-)'
return
}
//当输入的内容包含？时，先显示Thinking...
this.answer = 'Thinking...'
var vm = this
//调用https://yesno.wtf/api接口，得到需要展示的answer的值
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
//调用接口出错时，抛出异常
vm.answer = 'Error! Could not reach the API. ' + error
})
}
}
})
</script>3》computed与watch的区别
computed计算属性是有缓存的，基于它们的响应式依赖，当数据不发生变化时，会使用缓存中的数据，也就是第一次计算的结果。computed是不支持异步的，使用了异步将会失效无法计算。
watch侦听器是没有缓存的，每次调用都会重新进行计算，能够支持异步操作或者是执行性能开销较大的操作，并且可以设置中间状态。
四、动态绑定Class与Style
1》绑定HTML CLASS
1)对象语法
给class绑定一个对象，实现动态切换calss:
<div v-bind:class="{ active: isActive }"></div>这个div的calss是否存在，决定于isActive的值是否为真，当isActive的值为false时，那么这个div的calss的值为空，只有默认样式或者是继承的样式。
也可以传入多个字段来切换多个class的名称
html:
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>JS:
data: {
isActive: true,
hasError: false
}此时div的calss就为calss =“static active”
当hasError值也为true时，就为calss =“static active text-danger”
绑定的数据对象可以不在内联定义在模板中：
html:
<div v-bind:class="classObject"></div>js：
data: {
classObject: {
active: true,
'text-danger': false
}
}此时的渲染结果为class = "active"。
还能够绑定一个返回对象的计算属性。
html:
<div v-bind:class="classObject"></div>js:
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
//当isActive值为true并且error值为false时，active的值为true
active: this.isActive && !this.error,
//当error值为true，且错误类型为fatal时，text-danger值为true
'text-danger': this.error && this.error.type === 'fatal'
}
}
}2）数组语法
还可以将一个数组绑定给class
html:
<div v-bind:class="[activeClass, errorClass]"></div>js:
data: {
activeClass: 'active',
errorClass: 'text-danger'
}渲染结果为
<div class="active text-danger"></div>还能够结合使用三元表达式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>如果给js中的data添加isActive：‘true’,那么div的calss=“activeClass errorClass”，如果不添加，那么class的值就会一直都是errorClass。也可以直接使用对象语法
<div v-bind:class="[{ active: isActive }, errorClass]"></div>与上一行代码结果一致。
3）用在组件上
在定义一个自定义组件上使用class property是，class将会添加到这个组件的根元素上，这个元素上的已经存在class不会被覆盖。
用法：
生命一个组件：
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})使用这个组件时添加class
<my-component class="baz boo"></my-component>那么p标签将渲染为
<p class="foo bar baz boo">Hi</p>这个p标签上将有四个class样式
在使用组件时绑定calss也能够使用表达式：
<my-component v-bind:class="{ active: isActive }"></my-component>当isActive的值为true时，p的class =“foo bar active"
接下来工作原因，需要学习微信小程序，之后会继续总结vue2.x。。。。
目录
749
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
