模版语法
<!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>渲染字符串-姓名：{{name}}</p>
<p>渲染字符串-年龄：{{age}}</p>
<p>渲染字数组-数组：{{list1}}</p>
<p>渲染字数组-数组--按位置取值：{{list1[1]}}</p>
<p>渲染字对象-个人信息：{{obj1}}</p>
<p>渲染字对象-个人信息--按key取值：{{obj1.name}}</p>
<p>渲染字对象-个人信息--按key取值：{{obj1['age']}}</p>
<p>渲染字标签字符串(处理了xss攻击)：{{link1}}</p>
<p>三目运算符(运算完的结果被渲染)：{{10 > 9 ? 1 : 2}}</p>
<p>三目运算符：{{list1.length > 2 ? "大于2" : "不大于2"}}</p>
<p>简单表达式：{{1+99}}</p>
<p>函数返回结果渲染：{{add(1,2)}}</p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: 'lqz',
age: 99,
list1: [1, 2, 3, 4], // 数组
obj1: {name: 'lqz', age: 19}, // 对象
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
}
})
var list1 = [1, 2, 3, 4]
var res = list1.length > 2 ? "大于2" : "不大于2"
console.log(res)
</script>
</html>
文本指令
Vue的指令系统，放在标签，以 v- 开头的，每个指令都有特殊用途
v-text：把字符串内容渲染到标签内部
v-html：把字符串内容渲染到标签内部，但如果是标签字符串，会渲染成标签
v-show：控制标签显示与否；通过style的display是否等于 none 控制，在html中还存在
v-if：控制标签显示与否：通过dom操作做的，这个标签从dom中删除了
<!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>文本指令 v-text v-html</h1>
<h2>v-text把字符串内容渲染到标签内部</h2>
<h2>v-html把字符串内容渲染到标签内部，但如果是标签字符串，会渲染成标签</h2>
<p v-text="name"></p>
<p v-text="link1"></p>
<p v-html="name"></p>
<hr>
<h1>文本指令 v-show v-if</h1>
<h2>v-show控制标签显示与否:通过style的display是否等于none控制，在html中还存在</h2>
<div>
<p v-show="isShow">我是p</p>
</div>
<h2>v-if控制标签显示与否:通过dom操作做的，这个标签从dom中删除了</h2>
<span v-if="isShow2">
我是span
</span>
<hr>
<div>
<button @click="handleShow">点我看美女</button>
<br>
<img src="./img/1.jpeg" alt="" height="400px" width="400px" v-if="showPhoto">
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'lqz',
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
isShow: true,
isShow2: true,
showPhoto: false
},
methods: {
handleShow() {
this.showPhoto = !this.showPhoto
}
}
})
</script>
</html>
事件指令
用 v-on 绑定事件后，只要触发事件，就会执行函数
v-on：点击事件，双击事件，滑动事件 = ‘函数’
用的最多的就是 click 事件===》单击事件
v-on：click = ‘函数’===》放在标签上，点击标签，就会触发函数执行===》函数必须写在 methods 中，可以用 es6 语法的简写
methods: {
// handleClick: function () {
// alert('美女')
// }
handleClick() { // es6 语法
alert('美女')
},
}
v-on ：可以用 @ 替换
<!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>
<button v-on:click="handleClick">点我，弹美女</button>
<br>
<button v-on:click="handleClick1">点我，传参数,如果不传，默认第一个参数是 ：点击事件对象：PointerEvent</button>
<br>
<button v-on:click="handleClick1(1)">点我，传参数,传一个参数，只要传了参数，点击事件对象就不传入了</button>
<br>
<button v-on:click="handleClick1(1,2)">点我，传参数,传两个参数，正常使用</button>
<br>
<button v-on:click="handleClick1(1,2,3)">点我，传参数,传多个参数，只用前两个</button>
<br>
<button v-on:click="handleClick1(1,$event)">点我，传参数,第一个是数字，第二个是点击事件</button>
<h1>v-on: 简写 @ </h1>
<button @click="handleClick">点我，弹美女</button>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
// handleClick: function () {
// alert('美女')
// }
handleClick() { // es6 语法
alert('美女')
},
handleClick1(a, b) {
console.log(a, b)
}
}
})
// es6对象写法
//var userinfo={"username":"lqz","password":"123"}
//var userinfo={username:"lqz",password:"123"}
// var username="lqz"
// var password="123"
// var userinfo={username:username,password:password}
// var userinfo={username,password} // 放个变量到对象中，会一变量名作为key，值作为value
// console.log(userinfo['username'])
// console.log(userinfo.username)
// var printName=function () {
// console.log(this.username)
// }
var userinfo = {
username: "lqz",
password: "123",
printName() {
console.log('sxxxss')
}
}
userinfo.printName()
</script>
</html>
属性指令
每个标签都会有属性，动态替换属性的值，就要用到属性指令
v-bind：属性=‘变量’===》针对所有标签的所有属性 id name
简写成 ：属性=‘变量’
：id=‘变量’
：name=‘变量’
切换图片案例===》点击就修改src属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
.red {
color: rgba(248, 12, 12, 0.7);
}
.purple {
color: rgba(27, 27, 171, 0.7);
}
</style>
</head>
<body>
<div id="app">
<h1>属性指令</h1>
<div>
<button @click="handleClick">点我显示美女</button>
<br>
<button @click="handleClick1">点我变大美女</button>
<br>
<!-- <img v-bind:src="img_url" v-bind:height="height" v-bind:width="width">-->
<img :src="img_url" :height="height" :width="width">
</div>
<hr>
<h1>点击按钮，切换图片</h1>
<button @click="handleChange">点我换美女</button>
<img :src="img_url2" height="400px" width="400px">
<h2>class属性</h2>
<button @click="handleChangeClass">点我变class</button>
<div :class="isActivate?'red':'purple'">
<h1>我是一个div</h1>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
img_url: '',
height: '400px',
width: '400px',
img_url2: './img/1.jpeg',
img_list: ['https://up.enterdesk.com/edpic_source/92/e5/5a/92e55afed48d470aa18c304ef0eed788.jpg', 'https://up.enterdesk.com/edpic_source/2f/50/23/2f5023cacdacdce62e2838e5630c8fa9.jpg', 'https://up.enterdesk.com/edpic_source/00/49/06/004906cdedbc2e63b8453a01574d4811.jpg', 'https://up.enterdesk.com/edpic_source/d1/c5/40/d1c5404b1a7bab59511502337c8e471e.jpg', 'https://up.enterdesk.com/edpic_source/48/f0/b7/48f0b7bd54348323afa41e4807a4123d.jpg', 'https://up.enterdesk.com/edpic_source/02/01/1b/02011b5edd76f0165e0506af409daab7.jpg'],
isActivate: false
},
methods: {
handleClick() {
this.img_url = './img/1.jpeg'
},
handleClick1() {
this.height = '500px'
this.width = '500px'
},
handleChange() {
// Math.random() 0--1 之间的小数
// this.img_list.length 数组长度 3
this.img_url2 = this.img_list[Math.floor(Math.random() * this.img_list.length)]
},
handleChangeClass() {
this.isActivate = !this.isActivate
}
}
})
</script>
</html>
style和class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
.big {
font-size: 60px;
}
.back {
background-color: greenyellow;
}
</style>
</head>
<body>
<div id="app">
<h1>class和style:能够绑定什么类型的变量：字符串，数组，对象</h1>
<h2>style绑定字符串，数组，对象</h2>
<div :style="style_obj">
<button @click="handleXi">点击变细</button>
<button @click="handleFont">点击字变小</button>
<p>我是div内的p</p>
</div>
<h2>class绑定字符串，数组，对象</h2>
<div :class="class_obj">
<button @click="handleClick1">点击去掉背景</button>
<button @click="handleClick2">点击子变大</button>
<button @click="handleClick3">点击子变小</button>
<p>我是div内的p</p>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
// style是字符串类型
style_str: 'background: red;font-size: 60px;font-weight: bold',
// style是数组类型
style_list: [{'background': 'red'}, {fontSize: '60px'}, {fontWeight: 'bold'}],
// style:是对象类型(建议用对象)
style_obj: {'background': 'red', fontSize: '60px', 'font-weight': 'bold'},
// class 是字符串类型
class_str: 'big back',
// class 是数组类型--->推荐用它
class_list: ['big', 'back'],
// class 是对象类型
class_obj: {big: true, back: true}
},
methods: {
handleXi() {
//this.style_str = 'background: red;font-size: 60px'
this.style_list.pop()
}, handleFont() {
this.style_obj.fontSize = '30px'
}, handleClick1() {
// this.class_str = 'big'
// this.class_list.pop()
this.class_list.shift()
}, handleClick2() {
this.class_list.push('big')
}, handleClick3() {
this.class_obj.big = false
}
}
})
</script>
</html>
条件渲染
v-if v-else-if v-else
<!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>
<span v-if="score>=90">优秀</span>
<span v-else-if="score>=80&&score<90">良好</span>
<span v-else-if="score>=60&&score<80">及格</span>
<span v-else>不及格</span>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
score: 99
},
})
</script>
</html>
列表渲染
列表渲染 v-for 显示多行
购物车案例+bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<button class="btn btn-danger" @click="handleShow">点我显示购物车</button>
<button class="btn btn-danger" @click="handleDelete">删除最后一条</button>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>id号</th>
<th>商品名字</th>
<th>商品价格</th>
<th>商品数量</th>
</tr>
</thead>
<tbody>
<tr v-for="item in good_list">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.count}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
good_list: []
},
methods: {
handleShow() {
this.good_list = [
{id: 1, name: '钢笔', price: 9.9, count: 4},
{id: 2, name: '足球', price: 99, count: 4},
{id: 3, name: '篮球', price: 44, count: 32},
{id: 4, name: '电脑', price: 1299, count: 48},
{id: 5, name: '鼠标', price: 23, count: 4},
{id: 6, name: '脸盆', price: 8, count: 4},
]
},
handleDelete() {
this.good_list.pop()
}
}
})
</script>
</html>
v-for能循环的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>循环数组--》见过了</h1>
<p v-for="(value,index) in girls">第 {{index + 1}}个女神是：{{value}}</p>
<h1>循环对象</h1>
<p v-for="(value,key) in userinfo">key值是：{{key}}，value值是：{{value}}</p>
<h1>循环字符串</h1>
<p v-for="(value,index) in s">第 {{index}}个字母是：{{value}}</p>
<h1>循环数字</h1>
<p v-for="i in 10">{{i}}</p>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
girls: ['刘亦菲', '迪丽热巴', '高圆圆'],
userinfo: {name: 'lqz', age: 19, hobby: '篮球'},
s: 'hello world'
},
methods: {}
})
</script>
</html>
标签：style,name,渲染,标签,指令,var,class From： https://www.cnblogs.com/zfq132/p/17705127.html