vuejs数据双向绑定
下面我们来实现数据双向绑定的例子，我们使用vuejs的v-model属性
注意
v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。vuejs双向绑定并不能适用于所有的html表单，限制为input、select、textarea、components。
创建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
<html lang="en"> <head> <meta charset="utf-8" /> <title>Vuejs简单示例</title> <!--引入开发版本vue.js，在开发版本中会有很多友好的提示--> <script src='./vue.js'></script> <!--下面为cdn引用方式，实验中我们使用下载好的vue.js <script src='https://unpkg.com/vue@2.1.10/dist/vue.js'></script>--> </head> <body> <!--定义一个id为demo的div--> <div id="demo"> <!--此处的msg为在vuejs中定义的变量，放在两个花括号中--> <h1>{{msg}}</h1> <form @submit.prevent="additem(newitem)" > <div v-for="item in items"> <label>{{ item.text }}</label> </div> <div> <input type="text" v-model="newitem.text"> </div> <div> <button>添加</button> </div> </form> </div> <script> <!--实例化vuejs--> new Vue({ <!--el指定的id为css选择器--> el:'#demo', <!--我们的变量统统放到data中--> data:{ <!--此处声明的变量msg内容为实验楼--> msg:'实验楼第一个vuejs示例', items:[ {text:'hello 实验楼'} ], newitem:{text:''} }, methods:{ additem(newitem){ this.items.push(newitem); } } }) </script> </body> </html>
push() //在结尾增加一条或多条数据
pop() //删除最后一条数据
shift() //删除第一条数据，并返回这条数据
unshift() //在开始增加一条或多条数据，并返回数组长度
splice() //向/从数组中添加/删除项目，然后返回被删除的项目。
sort() //对数组的元素进行排序。
reverse() //颠倒数组中元素的顺序。