码迷,mamicode.com
首页 > Web开发 > 详细

vuejs

时间:2017-08-24 23:51:39      阅读:267      评论:0      收藏:0      [点我收藏+]

标签:vuejs   部分   版本   注意   title   script   例子   限制   绑定   

vuejs数据双向绑定

下面我们来实现数据双向绑定的例子,我们使用vuejsv-model属性

注意

  • v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
  • vuejs双向绑定并不能适用于所有的html表单,限制为inputselecttextareacomponents

创建vue-2.html并编辑为

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Vuejs简单示例</title>
        <!--引入开发版本vue.js,在开发版本中会有很多友好的提示-->
        <script src=‘./vue.js‘></script>
    </head>
    <body>
        <!--定义一个id为demo的div-->
        <div id="demo">
          <!--此处的msg为在vuejs中定义的变量,放在两个花括号中-->
        <h1>Hello {{msg}}</h1>
        <!--此处我们创建一个文本框并定义它的v-model的属性的内容为我们在vue中定义的msg-->
        <input type="text" v-model="msg">
        </div>
        <script>
            <!--实例化vuejs-->
            new Vue({
            <!--el指定的id为css选择器-->
                el:#demo,
            <!--我们的变量统统放到data中-->
                data:{
            <!--此处声明的变量msg内容为实验楼-->
                    msg:实验楼
                }
            })
    </script>
    </body>
</html>

el表示在html中哪个部分起作用,语法类似jquery的节点选择器,在这里我们看到它选择了一个ID

 

vuejs

标签:vuejs   部分   版本   注意   title   script   例子   限制   绑定   

原文地址:http://www.cnblogs.com/chenyedev/p/7425488.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!