VUE.js高级
Posted 小闫笔记
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE.js高级相关的知识，希望对你有一定的参考价值。
更正：
首先先更正一下昨天发送内容的错误之处，对你造成的影响深表歉意。对照昨天的文章：（此处连接方便大家查看对照）中第6部分vue的事件与函数中，第4行更正为this.属性名或对象名.属性（昨天写成了冒号，此处为手误，特此更正）
今日正文：
1.条件渲染 v-if
作用：用条件控制标签显示隐藏。
条件渲染取值为布尔型的数据。
现在总共学习了v-bind（控制html属性）、v-on（vue事件）、v-if（条件渲染）
v-if执行效率不高，因为它的隐藏false是靠删除标签/销毁标签做到的，它的取值也是布尔型。
下面的条件判断写在标签里面，条件成立的时候会显示标签里面的内容。不能单独使用v-else
条件判断：
v-if=“条件”
v-else
多重判断写法：
v-if="条件"
v-else-if="条件"
v-else
v-show="条件"如果条件为true会显示标签内容，是将display取值为none删除了，而不是修改值进行覆盖；如果为false会隐藏标签内容，此处的隐藏是将display的值改为none。此处的执行效率会相对来说高一点。
在工作中：
一个标签显示隐藏用v-show
多个标签显示隐藏用v-if和v-else
vue没有权限控制body，只能控制内容标签，不能控制结构标签。如果想控制的内容父级是结构标签，那么直接人为的构造一个父级标签。
在项目中，先了解分析需求，考虑准备什么样的数据，让这个数据变化就能页面跟着变化。
vue里面如果是不执行命令的时候，直接将事件=“”删掉就行了
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="js/vue.min.js"></script>
9</head>
10<body>
11 <!-- v-if:取值是布尔型，true显示，false隐藏（删除标签/销毁标签 -- 执行效率偏低） -->
12 <div id="app">
13 <div v-if="bool2">v-if</div>
14
15 <div v-if="bool2">v-if</div>
16 <div v-else>v-else</div>
17
18 <div v-if="str=='A'">A</div>
19 <div v-else-if="str=='B'">B</div>
20 <div v-else>daqiu</div>
21
22 <!-- v-show 取值布尔型 -->
23 <div v-show="bool2">v-show</div>
24 <button @click="bool2=true">按钮</button>
25 </div>
26 <script>
27 var vm = new Vue({
28 el:'#app',
29 data:{
30 bool1:true,
31 bool2:false,
32 str:'Q'
33 }
34 })
35 </script>
36</body>
37</html>
弹窗案例改写：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <link rel="stylesheet" href="css/main.css">
8 <title>Document</title>
9 <script src="../js/vue.min.js"></script>
10</head>
11<body>
12<div id="app" @click="bool=false">
13 <input type="button" value="弹出弹框" id="btn01" @click.stop="bool=true">
14 <div class="pop_main" id="pop" v-show="bool">
15 <!-- 点击白色弹窗内容不能关闭，如果是不设置，会冒泡到父级，关闭，因此要阻止冒泡 -->
16 <div class="pop_con" @click.stop>
17 <div class="pop_title">
18 <h3>系统提示</h3>
19 <a href="#" id="shutoff" @click="bool=false">×</a>
20 </div>
21 <div class="pop_detail">
22 <p class="pop_text">亲！请关注近期的优惠活动！</p>
23 </div>
24 <div class="pop_footer"></div>
25 </div>
26 <div class="mask"></div>
27 </div>
28</div>
29<script>
30 var vm = new Vue({
31 el:'#app',
32 data:{
33 // 先了解分析需求，考虑准备什么样的数据，让这个数据变化就能页面跟着变化
34 bool:false
35 }
36 })
37</script>
38</body>
39</html>
2.***列表和字典渲染
作用：将列表或字典里面的数据做显示
逻辑：[{},{},{}] ---- for ---- str += 标签 -----94+1行----xx.html(str)
v-for="临时变量in 序列"
v-for="(1,2) in 序列"列表中：1是数据 2是数据对应的下标。字典中：1是v值 2是key值
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="js/vue.min.js"></script>
9</head>
10<body>
11 <div id="app">
12 <ul>
13 <!-- <li v-for="临时变量 in 序列"></li> -->
14 <li v-for="i in mylist">{{ i }}</li>
15 </ul>
16
17 <ul>
18 <li v-for="i in mydict">{{ i }}</li>
19 </ul>
20 <!-- v-for="(1, 2) in 序列" -->
21 <!-- 列表：1：数据，2数据对应的下标 -->
22 <!-- 字典：1是v值，2是key值 -->
23 <ul>
24 <!-- 0、海王1 -->
25 <li v-for="(i, j) in mylist">{{ j+1 }}、{{ i }}</li>
26 </ul>
27 <ul>
28 <li v-for="(i, j) in mydict">{{ j }}: {{ i }}</li>
29 </ul>
30 </div>
31 <script>
32 var vm = new Vue({
33 el:'#app',
34 data:{
35 mylist:['海王1', '海王2', '海王3'],
36 mydict:{name:'laowang', age:100}
37 }
38 })
39 </script>
40</body>
41</html>
3.***表单输入数据绑定
作用：获取用户在表单控件中输入的数据（就是value值）
v-model="data区域中key值"
data:{txt:''}为空代表的初始值是没有，用户输入什么就显示什么.
txt:"请输入用户名"-----------默认显示的
数据可以从vue传到html做默认值，也可以从html获取数据到vue----叫做表单数据的双向绑定。
html中没有vue时表单默认选中用的是selected="selected"或者简写成selected
jQuery中追加数据的时候用的是push()结尾追加数据，append是追加节点
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="js/vue.min.js"></script>
9</head>
10<body>
11 <!-- 数据可以从vue传到html做默认值，也可以从html获取数据到vue -- 叫做表单数据的双向绑定 -->
12 <div id="app">
13 <input type="text" v-model="txt">
14 <div>{{ txt }}</div>
15 <select v-model="mysel">
16 <option value="0">北京</option>
17 <option value="1">上海</option>
18 <option value="2">广州</option>
19 </select>
20 </div>
21 <script>
22 var vm = new Vue({
23 el:'#app',
24 data:{
25 txt:'请输入用户名',
26 mysel:'1'
27 }
28 })
29 </script>
30</body>
31</html>
4.vue了解知识点
4.1计算属性
computed:{}和methods的语法是一样的
计算属性必须有一个返回值
computed中定义完函数后，mustache里面直接写计算属性的属性名就可以了。
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="js/vue.min.js"></script>
9</head>
10<body>
11 <div id="app">
12 <div>{{ str }}</div>
13 <div>{{ str.split('').reverse().join('') }}</div>
14 <div>{{ fnReverse }}</div>
15 </div>
16 <script>
17 var vm = new Vue({
18 el:'#app',
19 data:{
20 str:'abcdefg'
21 },
22 computed:{
23 fnReverse: function(){
24 return this.str.split('').reverse().join('')
25 }
26 }
27 })
28 </script>
29</body>
30</html>
4.2 侦听属性
作用：监视某个 数据是否发生变化
在new Vue{}中字典里面加watch:{}
侦听属性名必须是要侦听的属性名字。
num:function(a,b){}
num是要侦听的属性名，参数一：a是变化后的数据，参数二：b是变化前的数据
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="js/vue.min.js"></script>
9</head>
10<body>
11 <!-- 监视某个数据是否发生变化 -->
12 <div id="app">
13 <div>{{ num }}</div>
14 <button v-on:click="num+=1">按钮</button>
15 </div>
16 <script>
17 var vm = new Vue({
18 el:'#app',
19 data:{
20 num: 0
21 },
22 watch:{
23 // 侦听属性名必须是要侦听的属性的名字
24 num: function(a, b){
25 // 参数1是变化后的数据，参数2是变化前的数据
26 console.log(a)
27 console.log(b)
28 }
29 }
30 })
31 </script>
32</body>
33</html>
4.3过滤器
作用：格式化文本
电商站一个产品价格在0-999波动，如果是1-999需要写单位是元还是美元之类的，但是在0的时候就不需要写单位了。
定义：filters:{}(字典里面的语法和methods的一样)
调用：数据 | 过滤器名字1 |过滤器名字2.....
money: function(vals){return xxx}
vals接收传过来的数据（谁调用了过滤器就将谁的数据传过来）
一个网页里可以有多个对象。var xx = new Vue({})
局部过滤器：只在对象内部使用，其他对象无法使用本对象的过滤器。
全局过滤器：全局过滤器定义的代码必须要放置在将来要调用这个过滤器的对象（注意对象都是在script中写的）的上面。
Vue.filter(自定义的过滤器名字,过滤器的匿名函数)注意filter没有s
全局过滤器只能定义一个
匿名函数function(vals){}注意形参
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="js/vue.min.js"></script>
9</head>
10<body>
11 <!-- 定义 filters:{} -->
12 <!-- 调用 数据 | 过滤器名1 | 过滤器名2.... -->
13 <div id="app">
14 <div>{{ price1 | money | RMB }}</div>
15 <div>{{ price2 | money | RMB }}</div>
16 </div>
17
18 <div id="box">
19 <div>{{ price1 | RMB }}</div>
20 <div>{{ price2 | RMB }}</div>
21 </div>
22
23 <script>
24 // 全局过滤器的定义的代码必须要放置在将来要调用这个过滤器的对象的上面
25 // Vue.filter(过滤器名字, 匿名函数)
26 Vue.filter('RMB', function(vals){
27 if(vals == 0)
28 {
29 return vals
30 }
31 // ￥ 199
32 return '￥' + vals
33 })
34
35
36 var box = new Vue({
37 el:'#box',
38 data:{
39 price1: 199,
40 price2: 0
41 }
42 })
43
44
45 var vm = new Vue({
46 el:'#app',
47 data:{
48 price1: 999,
49 price2:0
50 },
51 filters:{
52 // 局部过滤器
53 money: function(vals){
54 // 999元 800元 0
55 if(vals == 0)
56 {
57 return vals
58 }
59 return vals + '元'
60 }
61 }
62 })
63 </script>
64</body>
65</html>
5.对象生命周期
vue创建出来的对象的生命周期
没有----创建出来-----没有
beforeCreate-----created----beforeMount----mounted-----beforeUpdate-----updated
前四个是必备的
mounted（挂载）
mounted(){}
mounted: function(){}
要知道的生命周期中不同的阶段都执行到了什么
下面是生命周期的两种写法（用来个过程来展示）：
beforeCreate:function(){} 匿名函数
created(){}直接写
$el就是找的是基于当前对象生效的标签。
beforeCreated 数据和标签都没有
created 数据有了，但是没有找到标签
beforeMount 数据依旧有，对象已经生效于那个标签了，但是mustache里面的数据没有变化，没有修改
mounted标签生效了，mustache中的数据也能正常显示了
工作中要记忆的的是生命周期写法和mounted这个单词
vue和jQuery在开发过程中只能用一种。
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="js/vue.min.js"></script>
9</head>
10<body>
11 <div id="app">
12 {{ str }}
13 </div>
14 <script>
15 var vm = new Vue({
16 el:'#app',
17 data:{
18 str :'hello world'
19 },
20 beforeCreate: function(){
21 console.log( this.str );
22 console.log(this.$el)
23 },
24 created() {
25 console.log( this.str );
26 console.log(this.$el)
27 },
28 beforeMount() {
29 console.log( this.str );
30 console.log(this.$el)
31 },
32 mounted() {
33 console.log( this.str );
34 console.log(this.$el)
35 }
36 })
37 </script>
38</body>
39</html>
6.***数据交互
axios 读作：xios（a不发音，字母每个读出来）
发送方式method:'post'
成功.then(function(){})回调函数function中写成功后的命令
失败.catch(function(){})
axios（{
url:接口地址
data:{} 发送的数据
method:请求方式 get post
}）
.then()
.catch()
一般都是往有id的大的标签后面放vue
在成功后的的回调函数里面写this的话会出错，是语言的bug，不是代码有问题。
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>首页 - 个人选股系统 V5.87</title>
8 <link href="/css/bootstrap.min.css" rel="stylesheet">
9 <script src="js/vue.min.js"></script>
10 <script src="js/axios.min.js"></script>
11
12</head>
13
14<body>
15<div class="navbar navbar-inverse navbar-static-top ">
16 <div class="container">
17 <div class="navbar-header">
18 <button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
19 <span class="icon-bar"></span>
20 <span class="icon-bar"></span>
21 <span class="icon-bar"></span>
22 </button>
23 <a href="#" class="navbar-brand">选股系统</a>
24 </div>
25 <div class="collapse navbar-collapse" id="mymenu">
26 <ul class="nav navbar-nav">
27 <li class="active"><a href="">股票信息</a></li>
28 <li><a href="/center.html">个人中心</a></li>
29 </ul>
30 </div>
31 </div>
32</div>
33<div class="container" id="container">
34
35 <div class="container-fluid">
36 <table class="table table-hover">
37
38
39 <tr><th>序号</th><th>股票代码</th><th>股票简称</th><th>涨跌幅</th><th>换手率</th><th>最新价(元)</th><th>前期高点</th><th>前期高点日期</th><th>添加自选</th></tr>
40 <!-- 字典的id 字典的code -->
41 <tr v-for="i in mylist"><td>{{ i.id }}</td><td>{{ i.code }}</td><td>{{ i.sname }}</td><td>10.01%</td><td>4.40%</td><td>全新好</td><td>16.05</td><td>2017-07-18</td><td><input type="button" value="添加" name="toAdd"></td></tr>
42
43
44 </table>
45
46 </div>
47</div>
48<script>
49 var container = new Vue({
50 el:'#container',
51 data:{
52 mylist:[]
53 },
54 mounted() {
55 axios({
56 url:'/index_data',
57 method:'get'
58 })
59 .then(
60 // function(dat){
61 // // 获取数据，数据显示 == 获取数据，把这个数据放到mylist里面即可
62 // console.log(dat.data) //-- [{},{}]
63 // // this.mylist = dat.data
64 // // alert(this) 此处的this是window对象，并不是我们要的对象，不能使用this，这是语言本身的bug，并不是我们程序的问题，我们可以凭经验利用对象做到想要的效果。
65 // container.mylist = dat.data
66 // }
67 dat => {
68 this.mylist = dat.data
69 }
70 )
71 .catch(function(){
72 alert('请求失败')
73 })
74 },
75 })
76</script>
77</body>
78</html>
7.ES6
ES6是javascript语言版本号 2015 ES2015
ECMAscript
变量：
变量声明：let和const（和var的作用一样，但是修正了bug）
var中先使用了变量，但是定义变量在后面，会出现undefined。预解析了，但是没有解析到数据。let和const修正了这个bug，如果使用了这两个关键字，在定义了变量之前调用变量的时候，console控制台会报错。
const常量：不能改值的变量（如果改值了就会报错，可以用在某些不能变的数值上）
let
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script>
9 // alert(num1)
10
11 var num1 = 1
12 num1 = 10
13
14 // let const
15
16 let num2 = 2
17 num2 = 20
18 // alert(num2)
19
20 // alert(num3)
21 const num3 = 3 // 常量就是不能改值的变量
22 num3 = 30
23
24 </script>
25</head>
26<body>
27
28</body>
29</html>
箭头函数：
为了解决this指向出问题。新增了箭头函数。
箭头函数是从匿名函数改写来的 function(){}
var fn_xx = function(){}如果是有名函数的话，那么就用前面的这种方式。
箭头函数改写：
多参数：（1，2，3） => {命令}
一个参数：参数 => {}
没有参数：() => {}
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script>
9 // 箭头函数是从匿名函数改写来的 function(){}
10 function fn1(a, b){
11 var result = a + b
12 alert(result)
13 }
14 // fn1(1, 1)
15
16 var fn2 = function(a, b){
17 var result = a + b
18 alert(result)
19 }
20
21 // fn2(2, 2)
22 // ***** 1多参数： (1, 2, 3) => {命令}
23 var fn3 = (a, b) => {
24 var result = a + b
25 alert(result)
26 }
27 // fn3(3, 3)
28
29 // ****2一个参数： 参数 => {}
30 var fn4 = a => {
31 alert(a)
32 }
33 // fn4('hello world')
34
35 // **** 3没有参数： () => {}
36 var fn5 = () => {
37 alert(1)
38 }
39 fn5()
40 </script>
41</head>
42<body>
43
44</body>
45</html>
对象：
k == “k” 直接简写为 k
模块导入和导出在有的浏览器不支持，所以暂时不建议使用。
模块问题：有兼容性，依赖于服务器环境
工作中也会看到有的前端在本地写模块代码 – vue-project ： 框架写完代码（.vue格式的文件 – 组件）不是立刻就上线 – 打包生成能兼容的代码 – 将这些生成的代码 上传到服务器
下面是与数据有关的内容，是后端程序员关注的内容
ajax和vue的axios和vue的列表和字典渲染
根据对后端程序员重要程度排列 js>html>css
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script>
9 var person1 = {
10 name:'xiaoming',
11 age:18
12 }
13 // alert(person1.name)
14
15 var name = 'laowang'
16 var age = 100
17 var person2 = {
18 // 准备键值对name取值是laowang，age取值是100
19 // 需求：name的值随着name变量的值的变化而变化
20 //**** k==v 省略不写键值对只留一个单词也是键值对的意思
21 // name:name,
22 // age:age
23 name,
24 age
25 }
26 // alert( person2.name )
27 alert(person2.age)
28 alert(person2.name)
29 </script>
30</head>
31<body>
32
33</body>
34</html>
以上是关于VUE.js高级的主要内容，如果未能解决你的问题，请参考以下文章