新建Vue对象
<!DOCTYPE html> <html> <head> <title>Vue Demo</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="firstVue"> {{msg}} </div> </body> <script type="text/javascript"> var myVue = new Vue({ el: "#firstVue", data:{ msg:"hello world" } }) </script> </html> 1).js变量 myVue 就是Vue创建的一个对象,可以理解成把<div id="firstVue></div>和这个标签里面包含的所有DOM都实例化成了一个JS对象, 这个对象就是myVue 2).el是Vue的保留字,用来指定实例化的DOM的ID号, #firstVue这句话就是标签选择器,告诉Vue要实例化ID=“firstVue”的这个标签
数据绑定
VUE这个框架的数据流向是单向的,数据绑定后的数据流向是从vue实例——>DOM文档的 <body> <div id="firstVue" v-bind:hidden="my_hidden"> {{my_data}} </div> </body> <script type="text/javascript"> var myVue = new Vue({ el:"#firstVue", data:{ my_data: "test", my_hidden: "hidden" } }) </script> 1).data参数用来绑定VUE实例的数据变量,每个不同变量之间用逗号分隔,上面我们绑定了自定义变量my_data,并赋初值'test' 2).完成数据绑定工作,<div>标签里的{{myData}}数据会随着myVue实例里的myData数据的变动而变动,浏览器查看当前页面,会出现'test'字符串,说明数据绑定成功 3).如果想绑定某个HTML标签的属性值,就要用到v-bind:属性了,比如我想绑定一个标签是否可见的属性(hidden),v-bind:后面写想要绑定的属性,my_hidden也不需要用两个大括号括起来了 注: v-bind由于经常会用到,所以也可以缩写成冒号:,比如上面的<div>标签就完全可以这样写 <div id="firstVue" :hidden="my_hidden">{{my_data}}</div>
事件绑定
v-bind:是用来绑定数据的,v-on:则是用来绑定事件 <!DOCTYPE html> <html> <head> <title>Vue Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="firstVue"> <button v-on:click="clickButton">Click Me</button> <p>{{my_data}}</p> <p v-if="seen">现在你看到我了</p> </div> </body> <script type="text/javascript"> var myVue = new Vue({ el:'#firstVue', data:{ my_data: "test", my_hidden: "hidden", seen:true, }, methods:{ clickButton:function(){ this.my_data = "Wow! I'm changed!" } } }) </script> </html>
注:v-on:语法同样有一个缩写@,比如v-on:click="clickButton"就等价于@click="clickButton"
v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
表单控件绑定
从DOM中实时获取用户输入的数据赋值给vue,使用v-model 通过两步实现了数据反向传递
第一步,绑定了DOM标签的input事件(比如叫tapInput())
第二步,当用户进行输入时候,触发tapInput()函数,tapInput()函数内部读取此DOM标签的Value值,赋值给vue实例
<!DOCTYPE html> <html> <head> <title>Vue Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id="firstVue"> <input type="text" v-model="my_data" /> <button v-on:click="clickButton">Click Me</button> <p>{{my_data}}</p> </div> </body> <script type="text/javascript"> var myVue = new Vue({ el:'#firstVue', data:{ my_data: "test", my_hidden: "hidden" }, methods:{ clickButton:function(){ this.my_data = "Wow! I'm changed!" } } }) </script> </html>
这里增加了一个<input>标签,并且用v-model语法绑定了之前定义的变量my_data,当我们在<input>输入框输入值的时候,v-model会实时将最新值(value)赋值给vue实例的my_data变量,而my_data变量又将实时展现在<p>标签中
数据流:
DOM1(input标签)——>VUE——>DOM2(p标签)
组件
<script> Vue.component('button-demo',{ template:'<button>Hello button-demo!</button>' }); //注册了'button-demo'以后,<button-demo></button-demo>就等价于<button>Hello here!</button> //定义button-counter组件 Vue.component('button-counter',{ //定义数据 data:function(){ return { count: 0 } }, //定义方法 methods:{ clickAdd: function(){ this.count++ } }, template :'<button @click="clickAdd">You clicked me {{count}} times</button>' }); </script> <body> <button-demo></button-demo> <button-counter></button-counter> </body>
条件判断
//v-if 、v-else-if、v-else <div id="app"> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> </div> <script> new Vue({ el: '#app', data: { type: 'C' } }) </script>
v-show
v-show 指令来根据条件展示元素 <h1 v-show="ok">Hello!</h1>
循环使用 v-for 指令
<div id="app"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ] } }) </script>