# vue.js 之 对vue.js基础理解

vue.js 之 对vue.js基础理解

Vue构造器

• 1 . Vue.js是一个构造函数，编程中称之为构造器

• 2 . 每一个new Vue() 都是一个Vue构造函数的实例，这个过程叫做实例化

• 3 . 构造函数需要将其实例化后才会启用 var vm = new Vue({ //...})

• 4 . Vue构造器要求实例化时需要传入一个选项对象

    <div class="app">
        {{msg}}
</div>

    <script>
        //vue.js  组件其实都是被扩展的 vue实例。
        
          var vm=new Vue({           //vue 实例   
                el:".app",
                data:{
                    msg:"hello vue.js"
                }
            });
        //  响应式    
        //vm(构造器) 是 Vue  的实例
        //vue 是 vm  的构造器  ( 构造函数)
    </script>

如：{{msg}}

1）{{msg}}会在视图中显示

2）{{msg}}在实例化后仍然保持数据响应

3）{{msg}}尽管在console.log(data)中存在，但视图却找不到，且会报错

4）因此请不要试图在实例化后添加任何属性

实例属性 方法以及生命周期

• 1 . data会代理其对象里的所有属性.

• 2 . 只有data里的属性是响应式的，即通信是双向的.

• 3 . Vue被实例化后，再创建的属性，将不会触发视图更新.

• 4 . 在文档中经常会使用 vm 这个变量名表示 Vue 实例，在实例化 Vue时，需要传入一个选项对象，它可以包含数据(data)、模板(template)、挂载元素(el)、方法(methods)、生命周期钩子(lifecyclehook)等选项。

1 . 每个Vue实例都会代理其data对象里所有的属性：

2 . Vue实例暴露了一些有用的实例属性与方法

var data = { a : 1 }
var vm = new Vue({
      data : data
})
    vm.a === data.a // -> true
    // 设置属性也会影响到原始数据
    vm.a = 2
    data.a // -> 2
    // ... 反之亦然
    data.a = 3
    vm.a // -> 3

1 . 为与代理属性区分，方前添加了前缀$

2 . app.$data===data //->true

app.$el===document.getElementById("app") //->true

var data = { a : 1 }
var vm = new Vue({
      el : '#example' ,
      data : data
    })
    vm.$data === data // -> true
    vm.$el === document .getElementById( 'example' ) // -> true
    // $watch 是一个实例方法
    vm.$watch( 'a' , function ( newVal, oldVal ) {
      // 这个回调将在`vm.a` 改变后调用
})

实例生命周期

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。

在Vue的整个生命周期中，它提供了一些生命周期钩子，给了我们执行自定义逻辑的机会。

created（创建后）mounted（载入后）updated（更新后）d（销毁后） estroyed（销毁后）

模板语法插值

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

插值

文本

{{}}数据绑定最常见的就是Mustache（双括号）的文本插值，使用v-once指令，可以执行一次插值，后面如果有改变，将不会更新。

<p v-once>{{message}}</p>

HTML

还可以插入HTML使用指令v-html

Mustache{{}} 不能在 HTML 属性中使用，应使用 v-bind 指令

    <div id="app-2">
        <p v-once>这里的数据只会执行一次更新：{{me    ssage}}</p>
        <div v-html="rawHtml">自定义html</div>
    </div>

var app2 = new Vue({
    el:'#app-2',
    data:{
        message:'第一次更新',
        rawHtml:'<ol><li>这里是自定义html</li><li>这里是自定义html</li></ol>'
    }
})
app2.message = '第二次更新没有赋值';

指令

v-if、v-on、v-bind

指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式（除了 v-for，之后再讨论）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

过滤器

是通过后面的函数对前面这个值做一个变化，得出需要的内容

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。过滤器应该被添加在 mustache 插值的尾部，由“管道符”指示：

过滤器可以串联 而且还可以接收参数

{{ message | capitalize }}

new Vue({
 // 将message的值首字母变为大写，其它不变
 filters: {
 capitalize: function (value) {
 if (!value) return ''
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
 }
 }
})

缩写

v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

计算属性

模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

计算属性 vs watched

当你有一些数据需要随着其它数据变动而变动时可以用 vs method计算属性 也可以用 vswatched ；

    <div id="app">
        {{fullName}}
        <input v-model="firstName"/>
        <input v-model="lastName"/>
</div>

<script>
        var vm = new Vue({
            el:'#app',
            data:{
                firstName:"chao",
                lastName:"qiu",
                fullName:"qiuchao"
            },
            computed:{
                fullName:{
                    get:function(){
                        return this.lastName+this.firstName;
                    }
                }
            },
            methods:{

            },
            filters:{
            },
            watch:{
                firstName:function(){
                    this.fullName=this.lastName+this.firstName;
                    //return this.lastName+this.firstName;
                },
                lastName:function(){
                   // return this.lastName+this.firstName;
                   this.fullName=this.lastName+this.firstName;
                },
            }
        });
    
</script>

与method对比

　　　　计算属性基于自己的依赖进行缓存，只要message没发生变化，多次访问该计算属性就会立即返回之前的计算结果，而不必再次执行函数；

　　　　而method调用总会执行该函数。

与vs watched对比

　　　　都是用来处理某些数据随其他数据的变动而变动的，但尽量不要滥用watch，如果代码是命令式和重复的，先考虑下计算属性computed，可使代码更简洁。

　　　　
　　　　

观察Wactchers

提供一个watch选项，当想要在数据变化响应时，执行异步操作或开销较大的操作时使用。

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过 watch 选项，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或昂贵操作时，这是很有用的。

<div id="app">
    {{msg}}
    <input v-model="msg"/>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:""
        },
        watch:{
            msg:function(newValue){
                localStorage.getItem("msg",newValue);
            }
        },
        mounted:function(){
            this.msg = localStorage.getItem("msg");
        }
    });
</script>