Vue_基础

Vue.js是当下很火的一个JavaScript MVVM库，以数据驱动和组件化的思想构建的。

1.声明式渲染：

    <div id="app">
        <span v-bind:title="tip">{{message}}</span>   <!--v-bind 指令 绑定dom元素属性-->
    </div>
    <script>
        var app = new Vue({
            el:'#app',  //id
            data:{
                message:'鼠标悬停查看绑定提示信息',    //{{message}}
                tip:'页面加载于 ' + new Date().toLocaleString()
            }
        })
    </script>

所有的元素都是响应式的。打开你的浏览器的控制台并修改app.message，你将看到上例相应地更新。

2.条件与循环

     v-if 判断为真是显示。

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

     v-for：循环

<div id="app">

    <ul>
       <li v-for="text in todos">{{text.txt}}</li>  <!--text指代{txt:'..'}-->

    </ul>

</div>
    <script>
        var app = new Vue({
            el:'#app',  //id
            data:{
                todos:[
                    {txt:'1-1'},
                    {txt:'1-2'},
                    {txt:'1-3'}
                ]
            }
        })
    </script>

3.处理用户输入：

v-on 指令绑定一个事件监听器：

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: '逆转'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

4.组件化应用构建：

<div id="app">
        <ol>
            <todo-item v-for="item in groceryList" v-bind:new_p="item" v-bind:key="item.id"></todo-item>
        </ol>
    </div>

    <script>

	//注册组件
        Vue.component('todo-item',{       //组件名字
            props:['new_p'],               //自定义属性名
            template:'<li>{{new_p.text}}</li>'
        })
        var app2=new Vue({
            el:'#app',
            data:{
                groceryList:[
                    {id:0,text: '1-1'},
                    {id:1,text: '1-2'},
                    {id:2,text: '1-3'}

                ]
            }
        })
    </script>

5.数据

var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})
// 他们引用相同的对象！
vm.a === data.a // => true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2
// ... 反之亦然
data.a = 3
vm.a // => 3

Vue 实例暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

vm.$el === document.getElementById('example') // => true

6.生命周期

 生命周期钩子：钩子的 this 指向调用它的 Vue 实例。（不要在选项属性或回调上使用箭头函数，箭头函数是和父级上下文绑定在一起的）

二、模板语法

小胡子语法（双大括号），无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

v-once 可实现当数据改变时，插值处的内容不会更新

v-html  可解析html代码 (你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS攻击。)

对于所有的数据绑定，支持JavaScript 表达式，如：

    {{ number + 1 }}
    {{ ok ? 'YES' : 'NO' }}
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id"></div>

1.1参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

<a v-bind:href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">...</a>

1.2修饰符
以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

1.3缩写

v-bind:href="url" 可缩写为 :href="url"

v-on:click="do" 可缩写为 @click="do"

三、计算属性和观察者

对于复杂的逻辑应当使用计算属性：

<div id="app">
        <p>{{mes}}</p>
        <p>{{mess}}</p>
        <p>{{message()}}</p>
    </div>
    <script>
//        将同一函数定义为一个方法 或 一个计算属性,达到同样的效果
        var app=new Vue({
            el:"#app",
            data:{
                mes:'hello'
            },
            computed:{
                //计算属性
                mess:function(){
                    return this.mes.split('').reverse().join('')
                }
            },
            methods: {
                //方法
                message:function(){
                    return this.mes.split('').reverse().join('')
                }
            }
        })
    </script>

两种方式的最终结果确实是完全相同的。

然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要mes 还没有发生改变，多次访问 mess 计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

三、Class与Style绑定

动态切换class：   v-bind:class

如：

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

data: {
  isActive: true,
  hasError: false
}

或

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

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

也可以绑一个返回对象的计算属性

data:{
    isActive:true,
    error:null
},
computed:{
    classObject:function(){
        isTrue=true
        return{
            active:this.isActive && !this.error,
            'text-danger':this.error && this.error.type === 'fatal',
            isTrue: isTrue
        }
    }
}

或数组

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

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

结果为：class="active text-dager"

或三元表达式

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

或对象语法

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