vue基础部分
一 vue概念
是一个构建用户界面的javascript框架
二 如何使用vue
1. 导入vue.js文件
2. 展示HTML
3. 建立vue对象,写JavaScript代码
vue的简单实用:申明式渲染
Vue.js的核心是,可以采用简洁的模板语法来声明式的将数据渲染在DOM:
1 <div id="app"> 2 {{ message }} 3 </div> 4 var app = new Vue({ 5 el: "#app", 6 data: { 7 message: "Hello Vue!" 8 } 9 })
这就渲染了一个页面,数据和DOM被关联在一起,但是所有的数据和DOM都是响应式的。都可以通过控制台去修改。
三、模板语法
模板
{{ msg }} 数据更新,模板变化
1 <div id="box"> 2 <input type="text" v-model="msg"> 3 <br> 4 {{ msg }} // 会更新;数据更新模板变化 5 <br> 6 {{ *msg }} //不会更新;数据只绑定一次 7 {{{{ msg }}}} //HTML转意输出 8 </div> 9
过滤器
过滤模板数据 {{ msg|filterA|filterB }}
系统提供了一些过滤器
{{ 'welcome'|uppercase }} //大写
{{ 'WELCOME'|lowercase }} //小写
{{ 'welcome'|capitalize }} //首字母大写
{{ 12|currency }} ->$12.00
{{ 12|currency ¥}} ->¥12.00
四 Vue中带有v-前缀的特殊属性
这些属性被称作指令,可以通过这些属性来操作元素
1. v-text: 插入值;如果设置在v-text,会负责标签本身的text值
2. v-html: 插入值和标签
3. v-bind: 绑定元素的属性来执行相应的操作
4. v-model:实现的数据和视图的双向绑定
5. v-if: 根据表达式的真假值来动态的显示或隐藏元素(如果是false,会移除该dom元素)
1 <h1 v-if="ok">Yes</h1> 2 <h1 v-if="ok">Yes</h1> 3 <h1 v-else>No</h1>
6. v-show: 功能和v-if类似,用来根据表达式的真假来动态的显示或隐藏元素(如果是false,相当于display=None)
7. v-for: 根据变量的值来循环渲染元素
1 // 遍历数组 2 <li v-for="(item, index) in arry"> 3 {{ item, index }} 4 // 遍历对象 5 <li v-for="item in object"> 6 {{ item.name }}
五 计算属性(computed)和观察者(watcher)
计算属性
模板类的表达式非常遍历,但是设计它们的初衷是用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护
1 <div id="example"> 2 {{ message.split('').reverse().join('') }} 3 </div>
对于像这样复杂的逻辑,我们都应当使用计算属性
计算属性用法
1 <div id="example"> 2 <p>Original message: "{{ message }}"</p> 3 <p>Computed reversed message: "{{ reversedMessage }}"</p> 4 5 var vm = new Vue({ 6 el: "#example", 7 data: { 8 message: "Hello" 9 }, 10 computed: { 11 // 计算属性的getter 12 reversedMessage: function(){ 13 // this 只想vm实例 14 return this.message.split('').reverse().join('') 15 } 16 } 17 }) 18 19 //结果 20 Original message: "Hello" 21 Computed reversed message: "olleH"
这里我们申明了一个计算属性reversedMessage.我们提供的函数将作为属性vm.reversedMessage的getter函数:
1 console.log(vm.reversedMessage) // "olleH" 2 vm.message = "Goodye" 3 console.log(vm.reversedMessage) // "eybdooG"
计算属性缓存和方法methods的区别
通过methods也可以达到上面的效果
1 <p>Reversed message: "{{ reversedMessage() }}"</p> 2 //在组件中 3 methods: { 4 reversedMessage: function(){ 5 return this.message.split('').reverse().join('') 6 } 7 }
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果是完全相同的。然后,不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要message还没有发生改变,多次访问reversedMessage计算属性会立即返回之前的计算结果,而不必再次执行函数。
这也意味着下面的计算属性将不再更新,因为Date.now()不是响应式依赖:
1 computed: { 2 now: function(){ 3 return Date.now() 4 } 5 }
相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。
我们为什么需要缓存?
假设我们有一个性能开销比较大的计算属性A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算熟属性依赖于A,如果没有缓存,我们将不可避免的多次执行A的getter!如果你不希望有缓存,请用方法来替代。
计算属性和侦听属性
Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动:侦听属性。
当你有一些数据需要随着其它数据变动而变动时,你很容易滥用watch,然后,通常更高的做法是使用计算属性而不是命令式的watch回调。
<div id="demo">{{ fullName }}</div> var vm = new Vue({ el: "#demo", data: { firstName: "Foo", lastName: "Bar", fullName: "Foo Bar" }, watch: { firstName: function(val){ this.fullName = val + ' ' + this.lastName }, lastName: function(val){ this.fullname = this.firstName + ' ' + val } } })
上面的代码是命令式且重复的。将它与计算属性的版本进行比较:
1 var vm = new Vue({ 2 el: "#demo", 3 data: { 4 firstName: 'Foo', 5 lastName: 'Bar' 6 }, 7 computed: { 8 fullName: function(){ 9 return this.firstName + ' ' + this.lastName 10 } 11 } 12 })
计算属性的setter
计算属性默认只有getter,不过在需要时,可以定义一个setter
1 computed: { 2 fullName: { 3 get: function() { 4 return this.firstName + ' ' + this.lastName 5 }, 6 // setter 7 set: function(newValue){ 8 var names = newValue.split(' ') 9 this.firstName = names[0] 10 this.lastName = names[names.length - 1] 11 } 12 } 13 }
现在再运行
vm.fullName = 'John Doe'
时,setter 会被调用,vm.firstName
和 vm.lastName
也会相应地被更新。侦听器 watcher
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过
watch
选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div id="watch-example"> 2 <p> 3 Ask a yes/no question: 4 <input v-model="question"> 5 </p> 6 <p>{{ answer }}</p> 7 </div> 8 <!-- 因为 AJAX 库和通用工具的生态已经相当丰富,Vue 核心代码没有重复 --> 9 <!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 --> 10 <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script> 11 <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script> 12 <script> 13 var watchExampleVM = new Vue({ 14 el: '#watch-example', 15 data: { 16 question: '', 17 answer: 'I cannot give you an answer until you ask a question!' 18 }, 19 watch: { 20 // 如果 `question` 发生改变,这个函数就会运行 21 question: function (newQuestion, oldQuestion) { 22 this.answer = 'Waiting for you to stop typing...' 23 this.getAnswer() 24 } 25 }, 26 methods: { 27 // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。 28 // 在这个例子中,我们希望限制访问 yesno.wtf/api 的频率 29 // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于 30 // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识, 31 // 请参考:https://lodash.com/docs#debounce 32 getAnswer: _.debounce( 33 function () { 34 if (this.question.indexOf('?') === -1) { 35 this.answer = 'Questions usually contain a question mark. ;-)' 36 return 37 } 38 this.answer = 'Thinking...' 39 var vm = this 40 axios.get('https://yesno.wtf/api') 41 .then(function (response) { 42 vm.answer = _.capitalize(response.data.answer) 43 }) 44 .catch(function (error) { 45 vm.answer = 'Error! Could not reach the API. ' + error 46 }) 47 }, 48 // 这是我们为判定用户停止输入等待的毫秒数 49 500 50 ) 51 } 52 }) 53 </script> 54
在这个示例中,使用 watch
选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。
除了 watch
选项之外,还可以使用命令式的 vm.$watch API。
六 class和style的绑定
作用:将数据和元素的class列表,以及元素的style内联样式的操作绑定在一起。
与HTML的class绑定
对象语法
<div v-bind:class="{active: isActive}"></div>
上述语法含义:active这个class的存在与否,取决于isActive这个data属性的值是true还是false
此外,v-bind:class指令也可以和普通class属性共存。如下案例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div class="static" v-bind:class="{active: isActive, 'text-danger': hasError}"></div> data: { isActive: true, hasError: false } //渲染结果 <div class="static active"></div> 另外一种引用方式 <div class="static" v-bind:clas="classObject"></div> data: { classObject: { isActive: true, hasError: false } } //渲染结果 <div class="static active"></div>
除了上面的内联、外部引用方法外。我们还可以将class和style与某个computed属性绑定在一起,computed属性对应的getter函数需要返回一个对象,这是一种常用且强大的用法:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div v-bind:class="classObject"></div> 2 data: { 3 isActive: true, 4 error: null 5 }, 6 computed: { 7 classObject: function(){ 8 return { 9 active: this.isActive && !this.error, 10 'text-danger': this.error && this.error.type === 'fatal' 11 } 12 } 13 }
数组语法
我们可以向v-bind:class传入一个数组,来与class列表对应:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div v-bind:class="[activeClass, errorClass]"></div> 2 data: { 3 activeClass: 'active', 4 errorClass: 'text-danger' 5 } 6 // 渲染结果 7 <div class="active text-danger"></div>
1 传入数组可以通过三元表达式来切换class列表中的某个class 2 <div v-bind:class="[isActive ? activeClass : '' , errorClass]"></div> 3 // 这里会直接添加errorClass, 但是只有在isActive值是true时,才会条件activeClass 4 5 6 如果需要更多判断条件,可以在数组语法中使用对象语法 7 8 <div v-bind:class="[{active: isActive}, errorClass]"></div>
与内联style绑定 v-bind:sytle
对象语法
v-bind:style的对象语法看起来非常像CSS,其实它是一个JavaScript对象。CSS属性名称可以使用驼峰式或串联式(使用串联式需要加引号)
1 <div v-bind:style="{color: activeColor, fontSize: fontSize + ''px}"></div> 2 data: { 3 activeColor: 'red', 4 fontSize: 30 5 } 6 7 还可以直接与data中的style对象绑定,这样模板看起来更清晰: 8 <div v-bind:style="styleObject"></div> 9 data: { 10 styleObject: { 11 color: "red", 12 fontSizeL "13px" 13 } 14 }
注意:v-bind:style的对象语法,通常也会和computed属性结合使用,此computed属性所对应的getter函数需要返回一个对象
数组语法
v-bind:style的数组语法,可以在同一个元素上,使用多个style对象
1 <div v-bind:style="[baseStyles, overridingStyles]"></div>
自定添加前缀
在v-bind中使用具有浏览器厂商前缀的CSS属性时(例如transform),vue会自动检测style添加合适的前缀
多个值
从2.3.0+起,你可以为每个style属性提供一个含有多个前缀值的数组,例如:
<div v-bind:style="{display: ['-webkit-box', '-ms-flexbox', 'flex']}"></div>
最终,这只会从数组中找出最后一个浏览器所支持的值进行渲染。在这个实例中,对于支持无前缀版本的flexbox的浏览器,最终将渲染为display: flex.