Vue之双向绑定v-cloak、v-model、v-bind、v-on、v-html

本文末尾有完整的代码, 包含了其他内容，有时间再清理一下
结构上主要有三个部分：template/component、script、style 即：模版/组件部分、vue脚本部分、css样式部分

v-cloak 一避免在网络不好的情况下数据延迟加载出现显示{{ }}的情况

<div v-cloak> {{ msg }}</div>   //这样就可以了
css中添加下面的样式
<style>
[v-cloak] {
  display: none
}

v-model 双向绑定

// component里面 如下两行, 假设id是app
<input type="text"  v-model="msg">
{{ msg }}

// srcipt 脚本
var vm= new Vue({
    el: "#app",
   data(){
      return {
              msg: "message for v-model example"
          }
    }
})

// 上面的data()..... 也可以简写成, 但上面的方式更规范
data:{
      msg: "message for v-model example"
}

v-bind 数据绑定到属性：比如title、value等，简写:title="title"(v-bind:title="title")

// component里面 如下两行, 假设id是app
<input type="button"  v-bind:value="msg">
{{ msg }}

// srcipt 脚本
var vm= new Vue({
    el: "#app",
   data(){
      return {
              msg: "message for v-model example"
          }
    }
})

// 上面的data()..... 也可以简写成, 但上面的方式更规范
data:{
      msg: "message for v-model example"
}

v-on 事件绑定, 具体有哪些默认事件可以查看Vue文档，常见的有click,keyup,focus等

// component里面 如下两行, 假设id是app
<input type="button"  @click="showMsg">
<input type="button"  on-click="showMsg">

<p v-on:click="showMsg"> {{ msg }} </p>
<p @click="showMsg"> {{ msg }} </p>

// srcipt 脚本
var vm= new Vue({
    el: "#app",
   data(){
      return {
              msg: "message for v-model example"
          }
    }
})

// 上面的data()..... 也可以简写成, 但上面的方式更规范
data:{
      msg: "message for v-model example"
}

v-html ：将html解析出来不原生显示

// component里面 如下两行, 假设id是app
<p>{{rawHtml}}</p>
<p v-text="rawHtml"></p>
<p v-html="rawHtml"></p>

// srcipt 脚本
var vm= new Vue({
    el: "#app",
   data(){
      return {
              rawHtml:"<h1> rawHtml</h1>",
              msg: "message for v-model example"
          }
    }
})

// 上面的data()..... 也可以简写成, 但上面的方式更规范
data:{
      msg: "message for v-model example"
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" oncont="ie=edge">
        <title>Lesson one</title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <style>
            .inner {
                width:500px;
                height: 3.125rem;
                padding:10px;
                border: 2px solid blue;
            }
            
            .input {
                width:300px;
            }
            
            .red {
                color:red;
            }
            .italic{
                font-style: italic;
            }
            .thin{
                font-weight: 150;
            }
            
            .active{
                letter-spacing: 0.5rem;
                font-weight: bold;
                color:forestgreen;  
            }
            
            .input {width:222px; height:30px;}
        </style>
    </head>
    <body>

    
    <div id="appx">
        <input type="text" class="input" v-model="msg" />
        
        <p v-on:click="showMsg">{{ msg }}</p>
        <p @click="showMsg">{{ msg }} ----</p>
        
        <p>{{rawHtml}}</p>
        <p v-text="rawHtml"></p>
        <p v-html="rawHtml"></p>
    </div>
    
    <script>
        var vmx = new Vue({
            el:"#appx",
            data(){
                return {
                    rawHtml:"<h1> rawHtml</h1>",
                    msg: "vue v-model example "
                }
            },
            methods: {
                showMsg:function(){
                    alert("v-on click event")
                }
            }
            
        })
    </script>
    <hr>
    <div id="app2">
        <h2 v-bind:class="['tink', 'italic']">This is a vue v-bind class example!</h2>
        <h2 :class="['tink', 'italic']">This is a vue v-bind class example 2!</h2>
        <h2 :class="['tink', 'italic', active?'active':'']">This is a vue v-bind class example 2!</h2>
        <h2 :class="['tink', 'italic', activeFalse?'active':'']">This is a vue v-bind class example 2!</h2>
        <h2 :class="['tink', 'italic', {'active':flag}]">This is a vue v-bind class example 2!</h2>
        <h2 :class="classObj">This is a vue v-bind class example Obj 2 class!</h2>
        <h2 :style="styleObj">This is a vue v-bind class example Obj 2 style 11111!</h2>
        <h2 :style="styleObj2">This is a vue v-bind class example Obj 2 style 2222222!</h2>
        <h2 :style="[styleObj, styleObj2]">This is a vue v-bind class example Obj 2 style 333333!</h2>
        
        
    </div>  
        
    <script>
        var vm2 = new Vue({
            el: "#app2",
            data: {
                active: true,
                activeFalse: false,
                flag: true,
                styleObj: {color: 'green', 'word-spacing': '1rem', 'font-weight': 500},
                styleObj2: {color:'pink', 'background':'#555', 'font-style': 'oblique'},
                classObj:{red: true, active: false, italic: false}
            }
        });
    </script>   
        
        
        
    <div id="app" style="margin-top:40px;">
        v-bind只能实现数据的单向绑定，无法实现数据的双向绑定
        <input type="button" v-bind:value="msg" class="input" />
        <input type="text" v-bind:value="msg" class="input" />
        
        
        <hr>
        v-model 可以实现表单元素和model中数据的双向绑定，只能运用在表单元素中 input / selcet/checkbox/radio/textarea
            
        <input type="text" class="input" v-model="msg" />
        
    </div>
        
    
        
    <script>
        var vm = new Vue({
            el: "#app",
            data:{
                msg: "v-bind 单向绑定"
            }
        })
        
        
    </script>   
    </body>
</html>