Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
1 <script src="vue.js"></script> 导入vue.js 2 </head> 3 <body> 4 <div id="app"> 5 <p>{{temp}}</p> 渲染一个变量temp 6 <b v-text="temp"></b> 通过v-text赋值 渲染字符串 7 <div v-html="temp"></div> 通过v-html赋值 既能渲染字符串，也能渲染标签。 8 </div> 9 <script> 10 new Vue({ 11 el: "#app", 找到id为app的标签 12 data: { 13 temp: "我是temp" 渲染内容 14 } 15 }) 16 </script>
上面代码为Vue的三种赋值方式
v- 是一种指令。
el 是找最外层的元素，根元素，找的内容必须是ID，同样必须通过#号查找。
必须是字符串类型，还可以用原生的js写法。例如 document.getElementById()
temp 必须是data中的变量，不然会报错。
1 <script src="vue.js"></script> 2 </head> 3 <body> 4 <div id="app"> 5 <div>{{temp + 'hey hey yoyo'}}</div> #变量可以拼接字符串 6 <div>{{temp2?'我是对的':'我是错的'}}</div> # ？后面是True显示的内容； ：后面显示的是False显示的内容 7 </div> 8 <script> 9 new Vue({ 10 el: "#app", #找到对应的标签 11 data: { 12 temp: "我是temp", #第一个变量 13 temp2:true #显示为true内容 14 } 15 }) 16 </script> 17 </body> 18 </html>
通过三元表达式来显示赋值内容
1 <body> 2 <div id="app"> 3 <div>{{temp + 'hey hey yoyo'}}</div> 4 <div>{{temp2?'我是对的':'我是错的'}}</div> 5 </div> 6 <script> 7 var vm = new Vue({ 8 el: "#app", 9 data: { 10 temp: "我是temp", 11 temp2:true 12 } 13 }) 14 setTimeout(function () { 15 vm.temp = "我要成为世界最强" 16 },5000) 17 </script> 18 </body>
在之前代码基础上增加一个setTimeout,延时调用，将上面变量vm 重新赋值。
1 <body> 2 <div id="app"> 3 <p>{{count + 1000}}</p> 4 <p>{{count + count2}}</p> {{count}} 5 {{count}} 6 <p v-text="count+1000"></p> 7 <div v-html="str"></div> 8 </div> 9 <script> 10 new Vue({ 11 el: "#app", 12 data: { 13 count:100, 14 count2:1000, 15 str:"<input type='button' value='碧海蓝天'>" #将str赋值为一个input标签，通过v-html渲染 16 } 17 }) 18 </script> 19 </body>
该段代码实现了变量与数字的拼接以及通过vue赋值一个标签。
1 <body> 2 <div id="app"> 3 <input type="text" v-model="showtemp"> 4 <a v-bind:href="url">www.baidu.com</a> 5 <a :href="url">www.baidu.com</a> 6 </div> 7 <script> 8 new Vue({ 9 el:"#app", 10 data:{ 11 url:"http://www.baidu.com"; 12 } 13 }) 14 </script> 15 </body>
如上，通过v-bind可以给标签绑定属性，v-bind可以缩写为: 冒号.
1 <body> 2 <div id="app"> 3 <p>{{count + 1000}}</p> 4 <p>{{count + count2}}</p> {{count}} 5 {{count}} 6 <p v-text="count+1000"></p> 7 <div v-html="str"></div> 8 <div v-show="ok">明天会更好</div> 9 <p v-if="yes">我要成为王者</p> 10 </div> 11 <script> 12 new Vue({ 13 el: "#app", 14 data: { 15 count:100, 16 count2:1000, 17 str:"<input type='button' value='碧海蓝天'>", 18 ok:true, #如果为true则显示 19 yes:true #如果为true则显示 20 } 21 }) 22 </script> 23 </body>
v-show 为true则显示，为false则隐藏，实际是增加style="display:none"
v-if 为true则显示，为false不显示，根本上是执行了插入和删除的操作。
Vue的循环
1 <body> 2 <div id="app"> 3 <ul> 4 <li v-for="(item,index) in arr"> 5 数值：{{item}} 6 下标: {{index}} 7 </li> 8 </ul> 9 </div> 10 <script> 11 new Vue({ 12 el: "#app", 13 data: { 14 arr:[11,22,33,44,55] 15 } 16 }) 17 </script> 18 </body>
面代码是通过循环创建li标签，显示列表中的内容以及索引。
1 <body> 2 <div id="app"> 3 <ul> 4 <li v-for="item in obj"> 5 {{item}} 6 </li> 7 </ul> 8 </div> 9 <script> 10 new Vue({ 11 el: "#app", 12 data: { 13 obj:{name:"tom",sex:"male",age:18} 14 } 15 }) 16 </script> 17 </body>
面代码是循环一个字典，显示内容。默认显示value。
1 <div id="app"> 2 <ul> 3 <li v-for="(item,key) in obj"> 4 {{key}} 5 {{item}} 6 </li> 7 </ul> 8 </div> 9 <script> 10 new Vue({ 11 el: "#app", 12 data: { 13 obj:{name:"tom",sex:"male",age:18} 14 } 15 }) 16 </script>
1 <body> 2 <div id="app"> 3 <ul> 4 <li v-for="item in obj"> 5 {{item.name}} 6 {{item.age}} 7 </li> 8 </ul> 9 </div> 10 <script> 11 new Vue({ 12 el: "#app", 13 data: { 14 obj:[{name:"tom",age:18},{name:"jerry",age:20}] 15 } 16 }) 17 </script>
如上，循环数组对象，并通过点取值。
1 <body> 2 <div id="app"> 3 <input type="button" value="hey" v-on:click="showme"> #设置绑定事件 4 </div> 5 <script> 6 new Vue({ 7 el: "#app", 8 data: { 9 }, 10 methods:{ 11 showme:function () { #绑定事件函数 12 alert("yoyo") 13 } 14 } 15 }) 16 </script> 17 </body>
设置绑定事件，还可以将v-on:click写成@click。
1 <body> 2 <div id="app"> 3 <input type="button" value="hey" @click="showme()"> 4 </div> 5 <script> 6 new Vue({ 7 el: "#app", 8 data: { 9 temp:"我觉的OK" 10 }, 11 methods:{ 12 showme:function () { 13 alert(this.temp) 14 } 15 } 16 }) 17 </script> 18 </body>
如上，通过绑定事件，this赋值。