1.vue插值语法
# 语法:
{{变量名 或 简单的js变量取值}} # 是放在标签内容里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
我的名字是：{{name}}
<br>
我的年龄:{{age}}
<br>
{{list1[0]}}
<br>
{{obj1.name}}---->{{obj1['age']}}
<br>
{{link1}} 处理了xss攻击
<br>
运算(简单的js语法)：{{10+20+30+40}}
<br>
三目运算符：{{10 < 20?'是':'否'}}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: 'lqz',
age: 19,
list1: [1, 2, 3, 4], // 数组
obj1: {name: 'Darker', age: 19}, // 对象
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
}
})
</script>
</html>
2.文本指令
# 指令就是写在标签里 带有 v- 前缀的特殊属性 都是vue的指令，指令用于在表达式的值改变时，将某些行为应用到 DOM上。
# 语法： ="变量名"
v-html 让文本内容渲染成HTML标签 (用于输出html代码)
v-text 让该标签里的内容显示为js变量对应的值 （很像插值）
v-show 放1个布尔值：为真 标签就显示；为假 标签就不显示 (只是隐藏该标签)
v-if 放1个布尔值：为真 标签就显示；为假 标签就不显示 (从dom中直接移除该标签)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
{{link1}}
<hr>
文本指令之 v-html：
<div v-html="link1"></div>
<hr>
文本指令之 v-text：
<div v-text="msg"></div>
<hr>
文本指令之 v-show：
<div v-show="b"> 我是div</div>
<hr>
文本指令之 v-if：
<div v-if="b"> 我是div</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
link1: '<a class="btn btn-danger" href="https://www.baidu.com">百度一下 你就知道</a>',
msg: 'lqz is handsome',
b: true
}
})
</script>
</html>
3.事件指令
# 给原生html标签 绑定事件
# 语法： @事件名="事件变量名"
v-on:click='' # 老语法
@click='' # 新语法，简写成@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!--<button class="btn btn-success" v-on:click="handleClick"> 点我弹窗 </button>-->
<!--<button class="btn btn-success" @click="handleClick"> 点我弹窗</button>-->
<button class="btn btn-success" @click="handleClick"> 点我显示不显示</button>
<div v-show="show">
我是div
</div>
<!--<button class="btn btn-success" @click="handleClick1(1,2)"> 传递参数--基本类型值</button>-->
<button class="btn btn-success" @click="handleClick1(show,'true')"> 传递参数--变量</button>
<button class="btn btn-success" @click="handleClick2($event)"> 传递事件</button>
</div>
</body>
<script>
var vm = new Vue({
// vue代码绑定的元素标签
el: '#app',
// 变量数据
data: {
show: true
},
// 事件方法
methods: {
handleClick() {
//alert('我先弹')
// 只需要把show变量改成false，div就隐藏了
this.show = !this.show // 点击一次，show的值就取反
},
handleClick1(a, b) {
console.log(a, b)
},
handleClick2(event) {
console.log(event)
},
}
})
</script>
</html>
5.属性指令
# 给原生html标签 绑定属性
# 语法： :html属性名 ="变量名"
v-bind： 直接写js的变量或语法（不推荐）
: 直接写js的变量或语法（简写，推荐） # eg: :class='变量名' :src='变量名'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
.red {
background: red;
}
.green {
background: green;
}
</style>
</head>
<body>
<div id="app">
<!--<div class="form-control">-->
<!--<div v-bind:class="name">-->
<div :class="name" :age="age">
我是div
</div>
<button @click="handleClick">点我变色</button>
<hr>
<img :src="src" alt="">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'red',
age:19,
src:'https://tva1.sinaimg.cn/large/008i3skNgy1gpsvuoolf9g30tm0qqn6k.gif'
},
methods: {
handleClick(){
if(this.name=='green'){
this.name='red'
}else {
this.name='green'
}
}
}
})
</script>
</html>
6.属性指令之style和class
# 语法：
:class='字符串、js数组、对象{red: true}、三目运算符'
:style='js变量、字符串、js数组[{backgreound: ‘red’},]、js对象{background: ‘red’} 、三目运算符'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
.red {
color: rgba(255, 104, 104, 0.7);
}
.font_20 {
font-size: 20px;
}
.be_bold {
font-weight: bold;
}
</style>
</head>
<body>
<div id="app">
<!--<div class="class_obj'">-->
<!--<div :class="10>20?'red':'be_bold'">-->
<div :class="class_obj">
我是div
</div>
<hr>
<!--<div style="font-size: 30px;background: red">-->
<div :style="style_class">
我是style的div
</div>
<button @click="handleClick">点我变色</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
// class_obj:'red' // 字符串形式
class_obj:['red',] // 数组(列表)形式,使用push追加，多个样式同时作用 (推荐)
// class_obj:{red:true,be_bold:false} // 对象（字典）形式,
// style_class:'background:red' //字符串
// style_class: [{background: 'red'}, {fontSize: '30px'}] //数组形式
style_class: { background: 'green',fontSize: '30px'} //对象形式（推荐） xx-xx形式转成驼峰
},
methods: {
handleClick(){
this.style_class.background='red'
this.style_class.fontSize='20px'
}
}
})
</script>
</html>
7.条件指令(条件渲染)
# 给原生html标签 绑定if判断
# 语法：
v-if 相当于： if
v-else 相当于：else
v-else-if 相当于：else if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<h1 v-if="score>90">优秀</h1>
<h1 v-else-if="score>80 && score <=90">良好</h1>
<h1 v-else-if="score>=60 && score <=80">及格</h1>
<h1 v-else>不及格</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
score: '88'
},
methods: {}
})
</script>
</html>
8.循环指令(列表渲染)
# 给原生html标签 绑定for循环
# 语法：
v-for：循环显示
<li v-for="(value, key) in object"> # 提供第二个的参数为键名
<li v-for="(value, key, index) in object"> # 第三个参数为索引
<li v-for="n in 10"> # 也可以循环整数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<button @click="refresh">点我刷新购物车</button>
<button @click="add">点我加入购物车</button>
<button @click="delete_good">点我删除一个</button>
<div v-if="show">
购物车空空如也
</div>
<table v-else>
<tr>
<td>商品名称</td>
<td>价格</td>
</tr>
<tr v-for="good in goods">
<td>{{good.name}}</td>
<td>{{good.price}}</td>
</tr>
</table>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
show: true,
goods: [{name: '特斯拉', price: 1999999}, {name: '鸡蛋', price: 2}, {name: '钢笔', price: 5}]
},
methods: {
refresh() {
this.show = false
},
add() {
this.goods.push({name: '苹果', price: 55})
},
delete_good(){
this.goods.pop()
}
}
})
</script>
</html>
1.v-for循环数字、数组、对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>循环数字</h1>
<p v-for="i in 4">数字为：{{i}}</p>
<hr>
<h1>循环数组</h1>
<p v-for="(item,i) in l">人名为：{{item}},索引为：{{i}}</p>
<hr>
<h1>循环对象</h1>
<p v-for="(value,key) in obj" :key="value">key值是：{{key}}，value值是：{{value}}</p>
<hr>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
l: ['egon', 'lqz', '鸡哥'],
obj: {name: 'lqz', age: 19, hobby: '篮球'}
},
methods: {}
})
</script>
</html>
# vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）
# 在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一
页面更新之后，会加速DOM的替换（渲染）
:key="变量"
# 实测：
不能写属性为key ，换一个 id或者其他属性
2.检测与更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="handleClick">点我变化</button>
<p v-for="item in l">{{item}}</p>
<hr>
<button @click="handleClick1">点我变化1</button>
<p v-for="item in obj">{{item}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
l: ['egon', 'lqz', '鸡哥'],
obj: {'name': 'lqz', 'age': 19}
},
methods: {
handleClick() {
// 不会变化
// this.l[0]='xxx'
// 会变化
Vue.set(this.l, 0, 'yyyy')
},
handleClick1(){
// this.obj['name']='egon'
Vue.set(this.obj,'name','eeee')
}
}
})
</script>
</html>
# 注意：
1.js中对象(字典)的key，可以不用加引号
# vue中，数组或对象的部分方法，才会自动检测及时更新，但有部分方法不会
# 故采用：
Vue.set(数组, 索引, 值) # 会被及时检测更新
Vue.set(对象, key, 值) # 会被及时检测更新
9.链接跳转标签
Vue组件中
# 1.内部跳转 使用 <router-link>标签
<router-link :to="item.link"><img :src="item.image" :alt="item.title"></router-link>
# 2.外部跳转 使用 <a>标签
<a :href="item.link"><img :src="item.image" :alt="item.title"></a>
