一、插值语法补充
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中=!是取反
标签:style,vue,show,标签,渲染,vm,属性
From: https://www.cnblogs.com/wznn125ml/p/17120920.html