纯个人对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。。。。
目录