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 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

 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  

View Code