Vue框架1

Vue框架个人总结一、：
1、html中的元素都需要用vue来实例化为一个vue对象：

window.onload = function(){
    var vm = new Vue({
        el:'#app', //el表示元素(elements)，后面是选择器。可以选择多个吗？？  不行，写多个默认选第一个
        data:{message:'hello world!'}
    });
}    
......

<div id="app">{{ message }}</div>

实例化后选择器中指定的标签范围（包括标签内容、标签css样式属性、标签其他属性）内就可以在标签html代码中直接使用vue对象中定义的属性和方法，注意在html中使用vue的方法和属性都基本都要写成字符串形式用“”或‘’引起来。并且属性和方法改变会实时提现在html代码内容上（响应式系统！）如下示例：

window.onload = function(){
    var vm = new Vue({
        el:'#app',
        data:{message:'hello world!'},
        methods:{
            fnChangeMsg:function(){
                this.message = 'hello Vue.js!';
            }
        }
    });
}    
......

<div id="app">
    <p>{{ message }}</p>
    <button @click="fnChangeMsg">改变数据和视图</button>
</div>

那么在标签范围内要怎么使用vue对象的属性和方法呢？
1.如果是标签内容可以直接用“Mustache”语法 {{}}
插入值
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

插入的值当中还可以写表达式：

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a v-bind:href="url">链接文字</a>

2.如果是标签的属性要设置成vue对象中某属性值，就不能使用“Mustache”语法，需要写成使用v-bind指令，需要设置标签哪个属性就v-bind 哪个属性，简写为：xx=“yy”，：
<a v-bind:href="url" v-bind:title='tip'>百度网</a> // "url"是vue对象的属性名，会根据属性名自动获取对应的值，下同
指令
指令 (Directives) 是带有“v-”前缀的特殊属性。指令属性的值预期是单个JavaScript表达式，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。常见的指令有v-bind、v-if、v-on。

<!-- 根据ok的布尔值来插入/移除 <p> 元素 -->
<p v-if="ok">是否显示这一段</p>

<!-- 监听按钮的click事件来执行fnChangeMsg方法 -->
<button v-on:click="fnChangeMsg">按钮</button>   //"fnChangeMsg"是vue对象中的方法名

缩写

v-bind和v-on事件这两个指令会经常用，所以有简写方式：
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

<!-- 完整语法 -->
<button v-on:click="fnChangeMsg">按钮</button>
<!-- 缩写 -->
<button @click="fnChangeMsg">按钮</button>

设置属性简写为：

//class是p标签元素的属性，"xxx"表示vue对象的属性名，会根据属性名取属性的值
设置click监听缩写为：<p @click=“runfunction”> //"runfunction"表示vue对象中的方法名
举例，给元素动态设置class属性值：

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

data属性值如下：
data: {
  isActive: true,
  hasError: false
}

显示效果：

<div class="static active"></div>

也可以给v-bind:class传一个对象引用

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

data属性值可以写成：

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

还可以支持数组
可以给v-bind:class传一个数组，以应用一个 class 列表

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

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

显示为：

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