1.vue版的Hello world
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用{{}}展示文本 -->
<h1>{{msg}}</h1>
<h2>{{msg}}</h2>
<h3>{{msg}}</h3>
<h4>{{msg}}</h4>
<h5>{{msg}}</h5>
<h6>{{msg}}</h6>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello world'
}
})
</script>
</body>
</html>
2.插值的表达式的使用
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{name}} </p>
<p>{{age}}</p>
<!-- 插值表达式的合法用发有:表达式/三元运算符 -->
<h1>表达式</h1>
<p>{{'路易斯'+name}}</p>
<p>{{age+4}}</p>
<p>{{name.split('').reverse().join('')}}</p>
<h1>三元运算符</h1>
<p>{{age}}{{age>=18?"已成年":"未成年"}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name :'jack',
age:17
}
})
</script>
</body>
</html>
3.v-text指令
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--
v-text指令也可以用来渲染文本 凡是以v-开头的就是指令，指令的功能就是增强html标签的功能
使用：在标签属性位置写上v-text="属性名"
和插值表达式使用区别：
插值表达式写在标签的innerHTML位置，而v-text写在标签属性位置，平时推荐使用{{}}
-->
<div v-text="name"></div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'jack'
}
})
</script>
</body>
</html>
4.v-html指令
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-html可以用来渲染带标签的文本 -->
<!-- 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。 -->
<div v-html="name"></div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: '<p>jack</p>'
}
})
</script>
</body>
</html>
5.v-bind 指令
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.red-font {
color: red;
}
</style>
</head>
<body>
<div id="app">
{{name}}
<!-- v-bind阔以用来动态绑定属性 使用方式 v-bind:属性名=“data里面的属性” -->
<img v-bind:src="avatar" alt="">
<!-- v-bind的简写方式 :属性名=“data里面的属性” 推荐写法-->
<img :src="avatar" alt="">
<a :href="'del.php?id='+id">删除</a>
<!-- v-bind阔以想绑什么属性，就绑什么属性，这种绑定在后面组件开发的时候很常用 -->
<p :name="name">测试属性绑定</p>
<!-- v-bind动态绑定样式 :class="{'类名':布尔值}" -->
<p :class="{'red-font': true}">红色字体</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'jack',
avatar: './avatar.jpg',
id: 11
}
})
</script>
</body>
</html>
6.v-for指令
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--
使用v-for渲染数组 和 对象
v-for能够根据data中数据的变化自动刷新视图
v-for渲染数组
1. 在标签的属性位置写上v-for="item in arr" item表示数组中的每一项，这个名字可以随意取，arr表示需要遍历的数组
2. 在标签的属性位置写上v-for="(item, index) in arr" index表示数组项的索引值
v-for渲染对象
1. 在标签的属性位置写上v-for="value in obj" value表示对象键的值，这个名字可以随便取，obj表示需要遍历的对象
2. 在标签的属性位置写上v-for="(value, key, index) in obj" key表示对象的键
注意，以下两种情况不会触发视图更新
1. 当使用数组的length属性去改变数组的时候，不会触发视图更新
2. 使用数组下标的方式去改变数组的时候，也不会触发视图更新
解决上述问题：
1. 使用Vue.set(arr, index, newVal) arr是需要改变的数组，index是数组里面的项， newVal是改变后的值
2. Array.prototype.splice()
注意 v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的时候，它会只更新那一项，好处就是提升性能。注意key的值唯一，不能重复
-->
<h1>v-for="item in arr"</h1>
<p v-for="item in user" :key="item.name">{{item.name}}:{{item.age}}</p>
<h1>v-for="(item, index) in arr"</h1>
<p v-for="(item, index) in user" :key="index">{{item.name}}:{{item.age}}索引：{{index}}</p>
<h1>v-for="value in obj"</h1>
<p v-for="value in boss" :key="value">{{value}}</p>
<h1>v-for="(value, key, index) in obj"</h1>
<p v-for="(value, key, index) in boss" :key="value">{{key}}:{{value}} -- {{index}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
user: [
{name: 'jack', age: 12},
{name: 'rose', age: 13}
],
boss: {
name: 'mayun',
age: 1111
}
}
})
</script>
</body>
</html>
7.v-model指令
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-model指令用来双向数据绑定：就是model和view中的值进行同步变化 -->
<!-- v-model只能在input/textarea/selet -->
<input type="text" v-model="name">
<!-- <h1>{{name}}</h1> -->
<!-- <div v-model="name"></div> 这是错误用法-->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'jack'
}
})
</script>
</body>
</html>
8.v-on指令
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{name}}</h1>
<!--
v-on指令用来监听dom事件
使用方法：
1. 在标签的属性位置写上v-on:任意的事件类型="执行的函数"
2. 简写：@任意的事件类型="执行的函数" （推荐）
3. 通过执行函数添加参数
4. 通过执行函数中添加$event参数传递事件对象，注意只能是$event,并且不能加引号
5. 事件修饰符可以给事件添加特殊功能 .stop .prevent
6. 可以给和按键相关的事件添加按键修饰符 常用的有 .enter
-->
<button v-on:click="changeMsg">点击改变</button>
<button @click="changeMsg">简写</button>
<button @click="changeMsgByArg('heima')">传参</button>
<button @click="getEvent($event)">事件对象</button>
<a href="http://www.baidu.com" @click.prevent="changeMsg">跳转</a>
<input v-on:keyup.13="submit">
<input v-on:keyup.enter="submit">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'jack'
},
// 在methods属性中定义函数
methods: {
changeMsg() {
// 注意在methods中想要去获取data中的属性的话，需要加上this，this表示vue实例
this.name = 'itcast'
},
changeMsgByArg(arg) {
this.name = arg
},
getEvent(e) {
console.log(e);
},
submit () {
console.log('submit');
}
}
})
</script>
</body>
</html>
9.v-if和v-show指令介绍
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-if和v-show指令可以用来控制元素的显示和隐藏 v-if="布尔值" v-show="布尔值" 布尔值为true元素显示，false隐藏 -->
<!-- 区别：
v-if通过控制dom来控制元素的显示和隐藏
v-show通过控制样式display:none来控制元素的显示与隐藏
使用场景区别
1. 涉及到大量dom操作的时候，我们需要使用v-show
2. 涉及到异步数据渲染的时候就要使用v-if
-->
<h1>v-if</h1>
<p v-if="isVisible">aaaa</p>
<h1>v-show</h1>
<p v-show="isVisible">bbbb</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isVisible: false
}
})
</script>
</body>
</html>
10.v-if指令
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
type: 'BVVV'
}
})
</script>
</body>
</html>
11.v-cloak指令
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 1. 给闪烁的元素加上v-cloak指令 -->
<!-- 当vue实例结束编译之后（vue文件加载完成之后）， v-cloak会被删除-->
<p v-cloak>{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello'
}
})
</script>
</body>
</html>
12.列表展示删除添加
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
#app {
width: 600px;
margin: 10px auto;
}
.tb {
border-collapse: collapse;
width: 100%;
}
.tb th {
background-color: #0094ff;
color: white;
}
.tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
}
.add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="app">
<div class="add">
编号:
<input type="text" v-model="newId"> 品牌名称:
<input type="text" v-model="newName">
<input type="button" value="添加" @click="addData">
</div>
<div class="add">
品牌名称:
<input type="text" placeholder="请输入搜索条件">
</div>
<div>
<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<tr v-for="(item, index) in list" :key="index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<!-- 将index作为参数传入 -->
<a href="#" @click="deleteData(index)">删除</a>
</td>
</tr>
<tr v-if="list.length === 0">
<td colspan="4">没有品牌数据</td>
</tr>
<!-- 动态生成内容tr -->
</table>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
newId: '',
newName: '',
list: [
{id: 1, name: 'CC', ctime: new Date()},
{id: 2, name: 'LV', ctime: new Date()},
{id: 3, name: 'AA', ctime: new Date()},
]
},
methods: {
deleteData (idx) {
this.list.splice(idx, 1)
},
addData () {
this.list.push({id: this.newId, name: this.newName, ctime: new Date()})
}
}
})
</script>
</html>
