v-onvuepress

## 一、插值语法及指令语法：
### 1、数据渲染到页面
1、插值语法：
作用：解析标签体内容。
写法：{{ xxx }}。 xxx是js表达式:
1、可以是任意数据类型。
2、可以是data中的变量名字，可以解析出来。
3、data没有的变量报错，
位置：可以直接写。也可以写在元素内部。


      <div id="app">
    <!--基础数据    -->
        {{'string'}}
        {{10+20}}
        {{false}}
        {{undefined}}
        {{null}}
        {{[1,2,3,4,5].slice(2)}}
        {{ {a:1,b:2 } }}
    <!--变量    -->
        {{message}}
        {{obj1.name}}
        <!--{{message2}}//data没有的变量报错。-->
      </div> 
      <script src="../js/vue.js"></script>
      <script>
        let app = new Vue({
          el:'#app',
          data:{
            message:'hello world',
            obj1:{
              name:'caomei'
            }
          }
        })
      </script> 


2、文本渲染v-text="data"。 解决方法：v-clock。

    默认v-text是没有闪烁问题，{{}}存在闪烁的问题
    v-text会覆盖掉元素中原本的内容，但是{{}}只会替换自己的这个占位符。

3、Html渲染:<div v-html="html"></div>

4、列表渲染:v-for。 data只有1值，但是里面是列表对象怎么办？



5、条件渲染:v-show （原理display：hidden）

6、条件渲染:v-if(),

7、条件渲染：v-once。渲染1次：

8、渲染0次：v-pre。:可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。


### 2、附加行为：
9、v-bind
    
    形式：v-bind:property="data"
    简写：property = "data"。
    定义：绑定属性。绑定样式
    单项绑定：data流向页面，页面不能流向data。

    <div id="root">
        <a href="www.baidu.com">caomei</a> //不用v-bind。属性="字符串"
        <a v-bind:href="url1">caomei</a> //v-bind:属性 ="变量"
        <a :href="url1">caomei</a>  //:属性="变量
        <a :href="obj1.url2">caomei</a>  //:属性="变量
        <!--<a v-bind:href="www.baidu.com">caomei</a> 错误哦，绑定必须是变量值-->
        <input type="text" v-bind:value="username">
        
        
    </div>
    <script>
    let app = new Vue({
      el:'#app',
      data:{
        url1:'www.baidu.com',
        obj1:{
          url2:'www.caomei.com'
        },
        username:'caomei'
      }
    })
    </script> 


10、v-model

    形式：v-model:value="data"。
    简写：v-model:value="data"
    适用于：有value属性的元素。input,select。
    双向绑定：data流向页面，页面流向data。

    <div id="root">
      <input type="text" v-model:value="username"> //v-model:=""。
      <input type="text" v-model="username"> // v-model=""
      <p v-model:value="username"></p> //报错。
    </div>
    <script>
    let app = new Vue({
      el:'#app',
      data:{
        url1:'www.baidu.com',
        obj1:{
          url2:'www.caomei.com'
        },
        username:'caomei'
      }
    })
    </script> 


11、v-on

    形式：v-on:behavior="method"。
    简写：
    @behavior="method"。
    @behavior="method()"。
    @behavior="method(event,arg)"。
    @behavior.prevent="method(event,arg)"。
    说明：v-on。是找methods里面的值。这里面的函数不需要放在data，不需要有data数据代理。

1

    Vue事件修饰符：
    1.prevent:阻止默认事件。
    2.stop：阻止事件冒泡
    3.once:触发一次
    4.capture: 使用事件捕捉模式。
    5.self:event.tar才是触发元素。
    6.passive:立刻执行

2

    Vue键盘事件：


##  二、自定义属性



##  三、v-model事件。