指令

以v-开头的特殊属性
属性的值 目前可以是单个表达式
作用：当表达式的值改变时，将这种变化响应式的影响dom内容**

• v-bind

<!--遇到元素的属性值是变化的,动态更新元素属性的时候，这情况应该使用v-bind指令,
这个属性值可以是元素自身的，也可以是自定义的-->
<a v-bind:href="url">这是链接</a>

• v-on

<!--v-on:（事件名）指令 用于监听dom事件 -->
<a v-on:click="alert">这是v-om:click点击事件</a>

• v-html

<div id="app1">
    后面是内容哦！
    <p>{{msg}}</p>
    <!--元素的属性值不能用花括号-->
    <!--v-html 作为元素的属性，不会将属性值作为该元素该属性的值，会将该属性值 放入该元素的内部-->
    <p v-html="msg"></p>
</div>

• 缩写

 <!--    v-bind:属性 可以缩写为 :属性，
         v-on:事件名 可以缩写为 :@事件名
         在所有支持 Vue.js 的浏览器都能被正确地解析,
         这些标记不会出现在最终渲染的标记中。
 -->
 <a :href="url">这是链接</a>
 <a @click="alert">这是@click点击事件</a>

特性

    <!--元素的属性值不能用花括号-->
    <p v-bind:ids="ids">这个属性id是传过来的</p>

    <!--布尔特性：在元素属性中如果是是否类型的， 如果传过来的值是null、undefined 或 false，该元素将不会显示该属性-->
    <button v-bind:disabled="dis1">我是不可用按钮</button>
    <button v-bind:disabled="dis2">我是可用按钮</button>

    <!--js表达式,每个元素的绑定只支持单个的表达式-->
    <p>num:{{num * 100 }}</p>

    <p>{{num>9?"num大于9":"num小于9"}}</p>

    <p>{{txt1}}翻转后是：{{txt1.split("").reverse().join('')}}</p>

    <p v-bind:keys="'data-k'+ids">key属性</p>

• js如下：

var app1 = new Vue({
        el: "#app1",
        data: {
            // 为了避免xss攻击，尽量不要让用户输入带这些特殊符号的，
            msg: "<span style='color:red;font-size:16px;'>我是新内容哦</span>"
        }
    });
var app2 = new Vue({
        el: "#app2",
        data: {
            ids: "123456",
            // 非0 字符串 对象
            dis1: {},
            // null、undefined 或 false，
            dis2: false,
            num: 10,
            txt1: "hello yunlulu"
        }
    });
  var app3 = new Vue({
        el: "#app3",
        data: {
            url: "http://www.baidu.com"
        },
        methods: {
            alert: function () {
                alert(111);
            }
        }
    });