Vue2.0 internal instruction (in) | Introduction Sir's blog

Section IV: v-text & v-html

Html output data values using {{message}}. But there are drawbacks of this situation is, is that when we have a slow Internet connection or javascript Error, will expose our {{message}}. v-text Vue provides us is to solve this problem.

<p>{{ message }}</p>=<p v-text="message"></p>

If you have written in javascript html tag, with v-text output is not out, then we need to use v-htmlthe label
instance:

<div id="app">
    <span v-text="message"></span>
    <span v-html="myHtml"></span>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"hello world",
            myHtml:"<h2>hello world</h2>"
        }
    })
</script>

Section V: Binding v-on event

Can listen to DOM events with v-on instruction to trigger some of js code
examples:

  <div id="app">
       本场比赛得分： {{count}}<br/>
       <button v-on:click="add">加分</button>
       <button @click="reduce">减分</button>
</div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                count:1
            },
            methods:{
                add:function(){
                    this.count++;
                },
                reduce:function(){
                    this.count--;
                }
            }
        })
    </script>

v-on simple wording, is replaced by @

<button @click="reduce">减分</button>

VI: v-model instruction

i.e., v-model binding instruction data source. Is to bind the data on a specific form elements, you can easily implement two-way data binding.

First, the text

<div id="app">
    <p>原始数据: {{message}}</p>
    <input type="text" v-model="message">
</div>
<script>
   var app=new Vue({
       el:"#app",
       data:{
           message:"hello world"
       }
   })
</script>

Second, multi-line text

<div id="app">
    <p>Message is: {{message}}</p>
   <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
</div>
<script>
   var app=new Vue({
       el:"#app",
       data:{
           message:"hello world"
       }
   })
</script>

三、复选框

1、单个勾选框

<div id="app">
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
</div>
<script>
   var app=new Vue({
       el:"#app",
       data:{
           checked:false
       }
   })
</script>

2、多个勾选框，绑定到同一个数数组:

<div id="app">
    <input type="checkbox" id="checkboxA" v-model="checked" value="A">
    <label for="checkboxA">A</label>
    <input type="checkbox" id="checkboxB" v-model="checked" value="B">
    <label for="checkboxB">B</label>
    <input type="checkbox" id="checkboxC" v-model="checked" value="C">
    <label for="checkboxC">C</label>
    <p>{{checked}}</p>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            checked:[]
        }
    })
</script>

3、单选按钮

<div id="app">
    <p>
       <input type="radio" id="one" value="男" v-model="sex">
       <label for="one">男</label>
       <input type="radio" id="two" value="女" v-model="sex">
       <label for="two">女</label>
       <p>您选择的性别是: {{sex}}</p>
   </p>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"hello world",
            isTrue:true,
            web_names:[],
            sex:'男'
        }
    })
</script>

Original: Big Box Vue2.0 internal instruction (in) | Introduction Sir's blog