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 <!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
以上是 vue 葵花宝典 的全部内容， 来源链接： utcz.com/z/377100.html
