Vue.js 基础

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>

循环字典，显示value和key

 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赋值。