vue 葵花宝典

vue2.js 下载地址：https://unpkg.com/vue@2.2.1/dist/vue.js

vue-router.js 下载地址：https://unpkg.com/vue-router@3.5.3/dist/vue-router.js

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

1、插值表达式

 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 <script type="text/javascript">
2 const Person={
3     name:"tom"
4 };
5 console.log(Person.name);
6 //声明的对象中属性是可以修改的
7 Person.name="zd";
8 console.log(Person.name)
9 </script>

View Code

9、数组的解构赋值

 1 <script type="text/javascript">
 2 //数组解构赋值
 3 // 数组解构赋值要一一对应，如果对应不上去就是undefind
 4 let [a,,b,c]=[1,2,3]
 5 console.log(a,b,c)
 6 
 7 // 可以用来接收多值
 8 function aa() {
 9     return ["11","22","33"]
10 }
11 let [a,b,c] = aa()
12 console.log(a,b,c)
13 </script>

View Code

10、对象的解构赋值

 1 <script type="text/javascript">
 2 var hobby={
 3     sleep:"too sleep",
 4     eat:123,
 5     play:function () {
 6         console.log("play...")
 7     }
 8 };
 9 let {sleep,eat,play}=hobby
10 console.log(sleep,eat,play)
11 // 注意：如果变量之前已经声明变量，再次赋值不能加let
12 // 并且整个赋值语句要加小括号包起来，以防止程序识别成作用域
13 (let {sleep,eat,play}=hobby)
14 </script>

View Code

11、字符串模板拼接

 1 <script type="text/javascript">
 2 'use strict';
 3 let data={
 4     title:"title1",
 5     content:"count1"
 6 
 7 };
 8 function test() {
 9     return "ok"
10 }
11 let note = document.getElementById("note")
12 //方法一
13 note.innerHTML="<h6>"+data.title+"</h6><p>"+data.content+"</p>"
14 //方法二
15 note.innerHTML=`<h6>${data.title}</h6><p></p>`
16 note.innerHTML=`<h6>${data.title}</h6><p>${test()}</p>`
17 
18 </script>

View Code

12、箭头函数

 1 <script type="text/javascript">
 2 'use strict';
 3 //没有参数
 4     var func01 = () => console.log("func01")
 5     func01()
 6 // 只有一个参数
 7     var func02 = (a) => console.log(a)
 8     func02("tom")
 9 // 只有两个参数
10     var func03 = (a,b) => console.log(a,b)
11     func03("tom","jim")
12 // 多行逻辑
13     var func04 = (a,b) => {
14         console.log(a,b);
15         return a+b
16 }
17 console.log(func04(9,6))
18  </script>

View Code

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

1  // 将字符串转成数组
2     var str2 = "abcd";
3     console.log([...str2])

View Code

14、set

size、add、has、delete、clear

 1 <script type="text/javascript">
 2 //去重
 3 let set2 = new Set([1,2,3,1]);
 4 console.log(set2) ;//{1,2,3}
 5 console.log(set2.size) //3
 6 console.log(set2.add("a")) //1,2,3,a
 7 console.log(set2.delete(1))
 8 console.log(set2)
 9 console.log(set2.has("a")) //true
10 console.log(set2.clear()) //清空
11     
12 </script>

View Code

15、map

1 <script type="text/javascript">
2 var map = new Map([["name","zd"],["age",12]]);
3 console.log(map.size);
4 console.log(map.set("sex","女"));
5 console.log(map.delete("sex"));
6 console.log(map.get("sex"));
7 console.log(map.clear())
8 </script>

View Code

16、组件

父组件传值给子组件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="vue2.js"></script>
 7     <script src="vue-route.js"></script>
 8 </head>
 9 <body>
10 <template id="account">
11 <div>
12     <h1>组件：{{name1}}</h1>
13 </div>
14 </template>
15 
16 <div id="app">
17     <account1 :name1="name"></account1>
18 </div>
19 
20 </body>
21 <script type="text/javascript">
22 Vue.component("account1",{
23     template:"#account",
       // 接受父组件的值
24     props:{
25         name1:String
26     }
27 });
28 
29 new Vue({
30     el:"#app",
31     data:{
32         name:"zd"
33     }
34 })
35 </script>
36 </html>

子组件传值给父组件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="vue2.js"></script>
 7     <script src="vue-route.js"></script>
 8 </head>
 9 <body>
10 <template id="account">
11 <div>
12     <h1 @click="sendData">发送数据</h1>
13 </div>
14 </template>
15 
16 <div id="app">
17     <account1 v-on:send="getData"></account1>
18 </div>
19 
20 </body>
21 <script type="text/javascript">
22 Vue.component("account1",{
23     template:"#account",
24     props:{
25         name1:String
26     },
27     methods:{
28         sendData(){
29             this.$emit("send",123)
30         }
31     }
32 });
33 
34 new Vue({
35     el:"#app",
36     data:{
37 
38     },
39     methods:{
40         getData(input){
41             console.log(input)
42         }
43     }
44 })
45 </script>
46 </html>

vue 的环境配置

下载node：http://nodejs.cn
node -v 进行检测
cnpm install -g vue-cli
vue init webpack pro
cd pro
npm install 下载依赖的模块
npm run dev
访问：localhost:8080

posted @ 2021-12-19 09:21 东方不败--Never 阅读(66) 评论(0) 编辑收藏举报

刷新页面返回顶部

东方不败--Never

vue 葵花宝典

1、插值表达式

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

3、v-if、v-show

4、v-for

5、v-on 监听事件

6、路由

7、let

8、const

9、数组的解构赋值

10、对象的解构赋值

11、字符串模板拼接

12、箭头函数

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

14、set

15、map

16、组件

父组件传值给子组件

子组件传值给父组件

vue 的环境配置

公告