一 vue概念

是一个构建用户界面的javascript框架

二如何使用vue

1. 导入vue.js文件

2. 展示HTML

3. 建立vue对象，写JavaScript代码

　　vue的简单实用：申明式渲染

Vue.js的核心是，可以采用简洁的模板语法来声明式的将数据渲染在DOM:

 <div id="app">

     {{  message }}

 </div>

 var app = new Vue({

     el: "#app",

     data: {

         message: "Hello Vue!"

     }

 })

这就渲染了一个页面，数据和DOM被关联在一起，但是所有的数据和DOM都是响应式的。都可以通过控制台去修改。

三、模板语法

模板

{{ msg }} 数据更新，模板变化

 <div id="box">

     <input type="text" v-model="msg">

         <br>

         {{ msg }}    // 会更新；数据更新模板变化

         <br>

         {{ *msg }}   //不会更新；数据只绑定一次

         {{{{ msg }}}} //HTML转意输出

 </div>

过滤器

过滤模板数据 {{ 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元素）

 <h1 v-if="ok">Yes</h1>

 <h1 v-if="ok">Yes</h1>

 <h1 v-else>No</h1>

6. v-show: 功能和v-if类似，用来根据表达式的真假来动态的显示或隐藏元素（如果是false，相当于display=None)

7. v-for: 根据变量的值来循环渲染元素

 // 遍历数组

 <li v-for="(item, index) in arry">

     {{ item, index }}

 // 遍历对象

 <li v-for="item in object">

     {{ item.name }}

五计算属性（computed）和观察者(watcher)

计算属性

模板类的表达式非常遍历，但是设计它们的初衷是用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护

 <div id="example">

     {{ message.split('').reverse().join('') }}

 </div>

对于像这样复杂的逻辑，我们都应当使用计算属性

计算属性用法

 <div id="example">

     <p>Original message: "{{ message }}"</p>

     <p>Computed reversed message: "{{ reversedMessage }}"</p>

 var vm = new Vue({

     el: "#example",

     data: {

         message: "Hello"

     },

     computed: {

         // 计算属性的getter

         reversedMessage: function(){

             // this 只想vm实例

             return this.message.split('').reverse().join('')

         }

     }

 })

 //结果

 Original message: "Hello"

 Computed reversed message: "olleH"

这里我们申明了一个计算属性reversedMessage.我们提供的函数将作为属性vm.reversedMessage的getter函数：

 console.log(vm.reversedMessage)  // "olleH"

 vm.message = "Goodye"

 console.log(vm.reversedMessage) // "eybdooG"

计算属性缓存和方法methods的区别

通过methods也可以达到上面的效果

 <p>Reversed message: "{{ reversedMessage() }}"</p>

 //在组件中

 methods: {

     reversedMessage: function(){

         return this.message.split('').reverse().join('')

     }

 }

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果是完全相同的。然后，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。

这也意味着下面的计算属性将不再更新，因为Date.now()不是响应式依赖：

 computed: {

     now: function(){

         return Date.now()

     }

 }

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

我们为什么需要缓存？

假设我们有一个性能开销比较大的计算属性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

        }

    }

})

上面的代码是命令式且重复的。将它与计算属性的版本进行比较：

 var vm = new Vue({

     el: "#demo",

     data: {

         firstName: 'Foo',

         lastName: 'Bar'

     },

     computed: {

         fullName: function(){

             return this.firstName + ' ' + this.lastName

         }

     }

 })

计算属性的setter

计算属性默认只有getter，不过在需要时，可以定义一个setter

 computed: {

     fullName: {

         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]

         }

     }

 }

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

侦听器 watcher

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

 <div id="watch-example">

     <p>

         Ask a yes/no question:

         <input v-model="question">

      </p>

     <p>{{ answer }}</p>

 </div>

 <!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->

 <!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->

 <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 watchExampleVM = new Vue({

   el: '#watch-example',

   data: {

     question: '',

     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.getAnswer()

     }

   },

   methods: {

     // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。

     // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率

     // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于

     // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，

     // 请参考：https://lodash.com/docs#debounce

     getAnswer: _.debounce(

       function () {

         if (this.question.indexOf('?') === -1) {

           this.answer = 'Questions usually contain a question mark. ;-)'

           return

         }

         this.answer = 'Thinking...'

         var vm = this

         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

           })

       },

       // 这是我们为判定用户停止输入等待的毫秒数

       500

     )

   }

 })

 </script>

在这个示例中，使用 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属性共存。如下案例：

<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函数需要返回一个对象，这是一种常用且强大的用法：

 <div v-bind:class="classObject"></div>

 data: {

     isActive: true,

     error: null

 },

 computed: {

     classObject: function(){

         return {

             active: this.isActive && !this.error,

             'text-danger': this.error && this.error.type === 'fatal'

         }

     }

 }

数组语法

我们可以向v-bind:class传入一个数组，来与class列表对应：

 <div v-bind:class="[activeClass, errorClass]"></div>

 data: {

     activeClass: 'active',

     errorClass: 'text-danger'

 }

 // 渲染结果

 <div class="active text-danger"></div>

     传入数组可以通过三元表达式来切换class列表中的某个class

 <div v-bind:class="[isActive ? activeClass : '' , errorClass]"></div>

 // 这里会直接添加errorClass, 但是只有在isActive值是true时，才会条件activeClass

     如果需要更多判断条件，可以在数组语法中使用对象语法

 <div v-bind:class="[{active: isActive}, errorClass]"></div>

与内联style绑定 v-bind:sytle

对象语法

v-bind:style的对象语法看起来非常像CSS,其实它是一个JavaScript对象。CSS属性名称可以使用驼峰式或串联式（使用串联式需要加引号）

 <div v-bind:style="{color: activeColor, fontSize: fontSize + ''px}"></div>

 data: {

     activeColor: 'red',

     fontSize: 30

 }

 还可以直接与data中的style对象绑定，这样模板看起来更清晰：

 <div v-bind:style="styleObject"></div>

 data: {

     styleObject: {

         color: "red",

         fontSizeL "13px"

     }

 }

注意：v-bind:style的对象语法，通常也会和computed属性结合使用，此computed属性所对应的getter函数需要返回一个对象

数组语法

v-bind：style的数组语法，可以在同一个元素上，使用多个style对象

 <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.

巴特西

vue基础部分

一 vue概念

二如何使用vue

vue的简单实用：申明式渲染

三、模板语法

模板

过滤器

五计算属性（computed）和观察者(watcher)

计算属性

计算属性用法

计算属性缓存和方法methods的区别

计算属性和侦听属性

计算属性的setter

侦听器 watcher

六 class和style的绑定

与HTML的class绑定

对象语法

数组语法

与内联style绑定 v-bind:sytle

对象语法

数组语法

自定添加前缀

多个值

最新文章

热门文章

巴特西

vue基础部分

一 vue概念

二 如何使用vue

vue的简单实用：申明式渲染

三、模板语法

模板

过滤器

五 计算属性（computed）和观察者(watcher)

计算属性

计算属性用法

计算属性缓存和方法methods的区别

计算属性和侦听属性

计算属性的setter

侦听器 watcher

六 class和style的绑定

与HTML的class绑定

对象语法

数组语法

与内联style绑定 v-bind:sytle

对象语法

数组语法

自定添加前缀

多个值

最新文章

热门文章

二如何使用vue

　　vue的简单实用：申明式渲染

五计算属性（computed）和观察者(watcher)