vue 葵花宝典

vue2.js 下载地址：https://unpkg.com/[email protected]/dist/vue.js

vue-router.js 下载地址：https://unpkg.com/[email protected]/dist/vue-router.js

es6：https://es6.ruanyifeng.com/#docs/let

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="vue.min.js"></script>
 7 </head>
 8 <body>
 9 <div id="app">
10     {{name}}
11     {{name2}}
12 </div>
13 
14 </body>
15 <script type="text/javascript">
16     new Vue({
17         el:"#app",
18         data:{
19             name:"rer",
20             name2:"xxx"
21         }
22     })
23 </script>
24 </html>

View Code

2、v-text、v-html、v-model、v-bind

v-model：双向绑定，绑定模型和视图
v-bind：绑定属性，v-bind:href=""

 1 <body>
 2 <div id="app">
 3     <h6 v-text="name"></h6>
 4     <div v-html="name2"></div>
 5     <input type="text" v-model="name"/>{{name}}
 6     <a v-bind:href="ahref">百度一下</a>
 7 </div>
 8 
 9 </body>
10 <script type="text/javascript">
11     new Vue({
12         el:"#app",
13         data:{
14             name:"zd",
15             name2:"<input type=\"text\">",
16             ahref:"http://baidu.com"
17         }
18     })
19 </script>
20 </html>

View Code

3、v-if、v-show

v-if：是将元素从树模型中增加或者删除。切换消耗大，安全性高。

v-show：相当于display 这个属性。切换消耗小。

 1 <body>
 2 <div id="app">
 3    <h6 v-if="isShow">xiaoqi</h6>
 4    <h6 v-show="isShow">xiaoqi</h6>
 5 </div>
 6 
 7 </body>
 8 <script type="text/javascript">
 9     new Vue({
10         el:"#app",
11         data:{
12            isShow:false
13 
14         }
15     })
16 </script>

View Code

4、v-for

 1 <body>
 2 <div id="app">
 3     <ul>
 4         <li v-for="i in ls">{{i.name}}{{i.age}}</li>
 5     </ul>
 6 </div>
 7 
 8 </body>
 9 <script type="text/javascript">
10     new Vue({
11         el:"#app",
12         data:{
13            ls:[
14                { age:16,name:"Tom"},
15                { age:17,name:"Jim"},
16                { age:18,name:"Rose"}
17            ]
18 
19 
20         }
21     })
22 </script>
23 </html>

View Code

5、v-on 监听事件

 1 <body>
 2 <div id="app">
 3     <ul>
 4         <li v-on:click="clic">写法一</li>
 5         <!--写法二-->
 6         <li @click="clic">写法二</li>
 7     </ul>
 8 </div>
 9 
10 </body>
11 <script type="text/javascript">
12     new Vue({
13         el:"#app",
14         data:{
15         },
16         methods:{
17             clic:function () {
18                 console.log("okokok")
19             }
20         }
21     })
22 </script>
23 </html>

View Code

6、路由

 1 <body>
 2 <div id="app">
 3     <router-link to="/login/tom">登录</router-link>
 4     <router-link to="/register">注册</router-link>
 5     <router-view></router-view>
 6 </div>
 7 </body>
 8 <script type="text/javascript">
 9     // 定义登录组件
10     var register=Vue.extend({
11         template:"<h2>注册。。</h2>>"
12     });
13     var login=Vue.extend({
14         template:"<h2>登录。。{{oname}}</h2>>",
15         data:function () {
16             return{
17                 oname:''
18             }
19         },
20         created:function () {
21             this.oname = this.$route.params.uname
22         }
23     })
24     // 定义路由并且注册路由规则
25     var router = new VueRouter({
26         routes:[
27             {path:'/',redirect:"/login"},
28             {path:'/login/:uname',component:login},
29             {path:'/register',component:register}
30         ]
31     })
32     // 使用路由
33     new Vue({
34         el:"#app",
35         router:router
36 
37     })
38 </script>

View Code

7、let

let 不能重复申明同一个变量

let 申明的变量不会被预解析

 1 <script type="text/javascript">
 2 // let 不能重复申明同一个变量
 3    var a="5";
 4    console.log(a)
 5    var a="8";
 6    console.log(a)
 7 
 8    let a="5";
 9    console.log(a)
10    let a="8";
11    console.log(a)
12 // let 申明的变量不会被预解析
13     console.log(aa)
14     let aa=12
15 </script>

View Code

ler 与for

 1 <script type="text/javascript">
 2 // var ls = document.querySelectorAll("li");
 3 //     for (var i=0;i<ls.length;i++){
 4 //     ls[i].onclick=function(){
 5 //         alert(i)
 6 //     }
 7 //     }
 8     var ls = document.querySelectorAll("li");
 9     for (let i=0;i<ls.length;i++){
10     ls[i].onclick=function(){
11         alert(i)
12     }
13     }
14 </script>

View Code

8、const

const 声明一个变量，一旦声明就不能修改

如果声明后再去修改会报错

只声明不赋值，也会报错

不能重复声明一个常量

声明的对象中属性是可以修改的

 1 <body>
 2 <div id="app">
 3     <h6 v-text="name"></h6>
 4     <div v-html="name2"></div>
 5     <input type="text" v-model="name"/>{{name}}
 6     <a v-bind:href="ahref">百度一下</a>
 7 </div>
 8 
 9 </body>
10 <script type="text/javascript">
11     new Vue({
12         el:"#app",
13         data:{
14             name:"zd",
15             name2:"<input type=\"text\">",
16             ahref:"http://baidu.com"
17         }
18     })
19 </script>
20 </html>0

View Code

9、数组的解构赋值

 1 <body>
 2 <div id="app">
 3     <h6 v-text="name"></h6>
 4     <div v-html="name2"></div>
 5     <input type="text" v-model="name"/>{{name}}
 6     <a v-bind:href="ahref">百度一下</a>
 7 </div>
 8 
 9 </body>
10 <script type="text/javascript">
11     new Vue({
12         el:"#app",
13         data:{
14             name:"zd",
15             name2:"<input type=\"text\">",
16             ahref:"http://baidu.com"
17         }
18     })
19 </script>
20 </html>1

View Code

10、对象的解构赋值

 1 <body>
 2 <div id="app">
 3     <h6 v-text="name"></h6>
 4     <div v-html="name2"></div>
 5     <input type="text" v-model="name"/>{{name}}
 6     <a v-bind:href="ahref">百度一下</a>
 7 </div>
 8 
 9 </body>
10 <script type="text/javascript">
11     new Vue({
12         el:"#app",
13         data:{
14             name:"zd",
15             name2:"<input type=\"text\">",
16             ahref:"http://baidu.com"
17         }
18     })
19 </script>
20 </html>2

View Code

11、字符串模板拼接

 1 <body>
 2 <div id="app">
 3     <h6 v-text="name"></h6>
 4     <div v-html="name2"></div>
 5     <input type="text" v-model="name"/>{{name}}
 6     <a v-bind:href="ahref">百度一下</a>
 7 </div>
 8 
 9 </body>
10 <script type="text/javascript">
11     new Vue({
12         el:"#app",
13         data:{
14             name:"zd",
15             name2:"<input type=\"text\">",
16             ahref:"http://baidu.com"
17         }
18     })
19 </script>
20 </html>3

View Code

12、箭头函数

 1 <body>
 2 <div id="app">
 3     <h6 v-text="name"></h6>
 4     <div v-html="name2"></div>
 5     <input type="text" v-model="name"/>{{name}}
 6     <a v-bind:href="ahref">百度一下</a>
 7 </div>
 8 
 9 </body>
10 <script type="text/javascript">
11     new Vue({
12         el:"#app",
13         data:{
14             name:"zd",
15             name2:"<input type=\"text\">",
16             ahref:"http://baidu.com"
17         }
18     })
19 </script>
20 </html>4

View Code

13、... 的用法，将字符串变数组

 1 <body>
 2 <div id="app">
 3     <h6 v-text="name"></h6>
 4     <div v-html="name2"></div>
 5     <input type="text" v-model="name"/>{{name}}
 6     <a v-bind:href="ahref">百度一下</a>
 7 </div>
 8 
 9 </body>
10 <script type="text/javascript">
11     new Vue({
12         el:"#app",
13         data:{
14             name:"zd",
15             name2:"<input type=\"text\">",
16             ahref:"http://baidu.com"
17         }
18     })
19 </script>
20 </html>5

View Code

14、set

size、add、has、delete、clear

 1 <body>
 2 <div id="app">
 3     <h6 v-text="name"></h6>
 4     <div v-html="name2"></div>
 5     <input type="text" v-model="name"/>{{name}}
 6     <a v-bind:href="ahref">百度一下</a>
 7 </div>
 8 
 9 </body>
10 <script type="text/javascript">
11     new Vue({
12         el:"#app",
13         data:{
14             name:"zd",
15             name2:"<input type=\"text\">",
16             ahref:"http://baidu.com"
17         }
18     })
19 </script>
20 </html>6

View Code

15、map

 1 <body>
 2 <div id="app">
 3     <h6 v-text="name"></h6>
 4     <div v-html="name2"></div>
 5     <input type="text" v-model="name"/>{{name}}
 6     <a v-bind:href="ahref">百度一下</a>
 7 </div>
 8 
 9 </body>
10 <script type="text/javascript">
11     new Vue({
12         el:"#app",
13         data:{
14             name:"zd",
15             name2:"<input type=\"text\">",
16             ahref:"http://baidu.com"
17         }
18     })
19 </script>
20 </html>7

View Code

16、组件

父组件传值给子组件

 1 <body>
 2 <div id="app">
 3     <h6 v-text="name"></h6>
 4     <div v-html="name2"></div>
 5     <input type="text" v-model="name"/>{{name}}
 6     <a v-bind:href="ahref">百度一下</a>
 7 </div>
 8 
 9 </body>
10 <script type="text/javascript">
11     new Vue({
12         el:"#app",
13         data:{
14             name:"zd",
15             name2:"<input type=\"text\">",
16             ahref:"http://baidu.com"
17         }
18     })
19 </script>
20 </html>8

子组件传值给父组件

 1 <body>
 2 <div id="app">
 3     <h6 v-text="name"></h6>
 4     <div v-html="name2"></div>
 5     <input type="text" v-model="name"/>{{name}}
 6     <a v-bind:href="ahref">百度一下</a>
 7 </div>
 8 
 9 </body>
10 <script type="text/javascript">
11     new Vue({
12         el:"#app",
13         data:{
14             name:"zd",
15             name2:"<input type=\"text\">",
16             ahref:"http://baidu.com"
17         }
18     })
19 </script>
20 </html>9