一、插值语法补充
1.vue没有get，对象取值可以用句点，也可以【'K'】
2.vue里数组取值，直接索引拿
3.三目运算符
和Python三元有略微差别，Py的是结果一 if 条件 else 结果二
三目：条件？结果一：结果二
4.vue中，标签默认是不渲染的
-
注意：
插值只能写在标签内部，不能写在标签的属性中 vm 的data中的数据，可以直接用vm对象句点出来，因为作者封装了一层
<div id="myvue">
<p>练习vue</p>
<p>{{name}}</p>
<p>{{age}}</p>
<p>{{hobby[1]}}</p>
<p>{{detail.city}}</p>
<p>{{detail["car"]}}</p>
<p> 三目运算符>>>
{{1>2?'确实':'怎么可能'}}
</p>
<p><a href="https://www.baidu.com">未使用vue</a></p>
<p><a href="{{url}}">使用vue</a></p>
</div>
<script>
var vm = new Vue({
el: '#myvue',
data: {
name:'jack',
age:18,
hobby:['song','dance','rap'],
detail:{city:'changsha',car:'Han'},
url:'https://www.baidu.com'
}
})
</script>
二、文本指令
准备
去装一下Pycharm的一个插件，进入File | Settings | Plugins，搜索Vue，有个绿色的V形状的插件，下一下
注意
v- 开头的，都是vue指令，可以放在任意标签上
如果在标签属性中写指令，就写变量，不用再双{}，也可以写表达式
<p v-show="10<9?true:false">hahahahahah</p> #这个是可以的，但是pycharm已经晕了
介绍
1.v-text
直接把字符串内容渲染在标签内部，等于<p>啥啥啥</p>
2.v-html
把字符串内容渲染成标签，写在标签内部
Html转义字符
>>><p v-html="url"></p>
3.v-show
等于布尔值，该标签是否显示，vue对象中封show=true/false
标签属性中v-show=show
其实就是去掉display /display:none
可以在浏览器的检查——控制台里面调show
vm.show=true 就会变动之类
这个不会删除整个标签，只是不显示而已
4.v-if
如果值false,标签整个删除，直接消失
三、属性指令
标签上的所有属性可以绑定变量，变量一变，属性的值也变
v-bind
v-bind:属性名=“属性值” >>>>>>>>>>可以简写成:属性名=“属性值”
1.比如说改a标签的指向链接
我们先在vue实例中存一下url变量
url:'https://www.4399.com'
<a v-bind:href="link" target="_blank">测试测试</a>
- 注意：
用了属性指令后，属性值必须是变量了，不能是原来的
四、事件指令
v-on:
v-on:事件名='函数' 可以简写成@事件名=“属性值”
vue中，函数不能写在data中了，必须写methods中
methods中想改data中的变量值，因为不在一个域，不能直接改，this.变量名就可以用到 ————this就是vm实例，可以打印看一下this
注意this指向问题
methods中如果再次套了函数，在改函数中，this不再是vm实例，而是window，可以打印看看
-
如何解决：
在第一层拿一个变量存一下老this即可，后续都拿这个变量作为vm实例来用
es6简写语法
methods里面的变量对函数可以有两种写法
1.K : function(){函数体代码}
2.K (){函数体代码}
第二种+箭头函数能避免this指向问题
五、class 和style
1.念旧
复习一下老的class和style是怎么用的
<style>
.c1 {
height: 80px;
width: 80px;
}
.font{
color: #5bc0de;
}
.font-size{
font-size: 50px;
}
</style>
______________________________
# 要修饰的标签
<p class="font-size font">测试老的类搭配style使用</p>
2.习新
Class
数组形式（推荐）
1.还是老办法，用:class='' 来添加属性
2.推荐使用数组
3.在js中给数组加内容，是push
给数组移除内容，是pop，还有shift
对象形式
1.标签属性还是那样写，vue实例中class_obj= {font:true，xx:false}的形式
注意：K不能用小横杠，会报错，可以用字符串形式，比如‘font-size’
2.如果是true，前端就渲染，false就不渲染
3.我们依旧可以句点符直接改已有的K
4.但是我们不能添加（能加，值也会变，但是前端样式没变）——牵扯到数组的检测与更新，后面会讲
Style
字符串形式
直接添加就行，不同style直接；后加即可
数组形式
列表套对象，一个个对象k对v，不是很好用
对象形式（推荐）
就是对象形式，注意驼峰可以直接句点
六、条件渲染
一样装饰给标签属性，后面是='条件'
| vue中 | 逻辑层面 |
|---|---|
| v-if | if |
| v-else-if | elif |
| v-else | else |
七、列表渲染v-for
注意，给要循环的标签加v-for
固定写法
v-for ='item in xxxx' ——xxxx就是自己写的，一般是列表套字典
使用了这个以后，改标签内，就可以使用{{ item.句点}}来取值
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="myvue">
<div class="container-fluid">
<div class="row">
<div class="text-center">
<br>
<button @click="click_func">点我显示靓仔信息列表</button>
<div v-if="show">
<table class="table table-hover">
<thead>
<tr>
<th>姓名</th>
<th>城市</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="item in detail_list">
<th scope="row">{{item.name}}</th>
<td>{{item.city}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#myvue',
data: {
show: false,
detail_list: [{name: '一号嘉宾', city: '长沙', age: 22}, {name: '二号嘉宾', city: '上海', age: 19},
{name: '三号嘉宾', city: '北京', age: 25}, {name: '四号嘉宾', city: '东京', age: 24}]
},
methods: {
click_func() {
this.show = !this.show
}
}
})
</script>
</body>
</html>
今日注意
1 ./ 相当于当前路径，不要直接写文件夹，这样好一点
2.js 的k 不用写引号
3.JS中数组就是列表
4.对象就是字典
5三目运算符就是三元表达式
6.js中=！是取反