TZ_16_Vue的v-model和v-on

1.v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：

• input

• select

• textarea

• checkbox

• radio

• components（Vue中的自定义组件）

基本上除了最后一项，其它都是表单的输入项。

举例：

html：

<body>
<div id="app">
    <!--双向绑定 -->
    <input type="text" v-model="num">

    <button v-on:click="num++">+</button>

　　<h1>
   　　 我是<span v-text="name"></span><br>
   　　 吃了{{num}}个人
　　</h1>
　　<span v-text="name"></span><br>
　　<span v-html="name"></span>

　　<h1>开售以下课程</h1>
　　<input type="checkbox" value="java" v-model="lessons"/>java<br>
　　<input type="checkbox" value="python" v-model="lessons"/>python<br>
　　<input type="checkbox" value="ios" v-model="lessons"/>ios<br>

　　<h1>您已经够卖</h1>
　　<!--join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的-->
　　{{lessons.join(",")}}

 </div>
　　<script src="node_modules/vue/dist/vue.js"></script>
  <script>
　　const app = new Vue({
　　 el: "#app",//element
　　data: { name: "大老虎",
　　　　　　num: 1,
　　　　　　lessons: []
　　},
});
　</script>
</body>

2.v-on指令用于给页面元素绑定事件。

　　另外，事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'

<body>
<div id="app">
    <!--v-on 绑定事件-->
　　<!--单机弹出一个提示框-->
    <button v-on:click="tips">点我</button>
    <br>
　　　<!--单机按钮 但是不触发div的v-on 事件冒泡使用 v-on:click.stop="触发的事件" -->
<div style="height: 100px;width: 100px;background-color: aqua;"  v-on:click="printf('div')">
        <button v-on:click.stop="printf('button')">点我试试</button>
    </div>
     <!--单机超链接 不触发href的地址 使用 v-on:clikc.prenevt="触发的事件"-->
    <a href="http://www.baidu.com" v-on:click.prevent="printf('百度一下')">百度一下</a>
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        methods: {
            tips: function () {
                alert("hello");
            },

        created: function () {
            this.name = "你好"
        },
            printf:function (msg) {
                console.log(msg)
            }
        },
    });

</script>
</body>