为什么要学习vue
为什么学习vue.png
什么是mvvm
MVVM.png
vue常用系统指令
vue的使用
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1引入vue文件-->
<script src="./vue2.js"></script>
</head>
<body>
<!-- 5使用{{}}展示数据-->
<div id="app">{{message}}</div>
</body>
<script>
//2创建vue实例
let vm=new Vue({
// 3. 通过el属性指定vue实例的监管范围，它的值是一个id
el:"#app",
//4 data属性保存数据
data: {
message: "hello world"
}
})
</script>
</html>
插值表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue2.js"></script>
</head>
<body>
<div id="app">
<!-- 插值表达式的合法用法有：表达式/三元运算符 -->
<p>表达式</p>
<p>{{name+"xin"}}</p>
<p>{{age+3}}</p>
<p>{{name.split('').reverse().join('')}}</p>
<h2>三元运算符</h2>
<p>{{age>18?"已成年":"未成年"}}</p>
</div>
</body>
<script>
let vm=new Vue({
el:"#app",
data:{
name:'xhw',
age:23
}
})
</script>
</html>
v-text
<div id="app">
<!--
v-text指令也可以用来渲染文本 凡是以v-开头的就是指令，指令的功能就是增强html标签的功能
使用：在标签属性位置写上v-text="属性名"
和插值表达式使用区别：
插值表达式写在标签的innerHTML位置，而v-text写在标签属性位置，平时推荐使用{{}}
-->
<div v-text="name"></div>
</div>
</body>
<script>
let vm=new Vue({
el:"#app",
data:{
name:'xhw'
}
})
</script>
v-html
<body>
<div id="app">
<!-- v-html可以用来渲染带标签的文本 -->
<!-- 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。 -->
<div v-html="name"></div>
</div>
</body>
<script>
let vm=new Vue({
el:"#app",
data:{
name:"<h1>xhw</h1>"
}
})
</script>
v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue2.js"></script>
<style>
.red-font{
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- v-bind阔以用来动态绑定属性 使用方式 v-bind:属性名=“data里面的属性” -->
<img v-bind:src="img">
<!-- 简写-->
<img :src="img">
<a :href="'del.php?id='+id">删除</a>
<!-- v-bind阔以想绑什么属性，就绑什么属性，这种绑定在后面组件开发的时候很常用 -->
<p :name="name">测试属性绑定</p>
<!-- v-bind 动态绑定样式-->
<p :class="{'red-font': true}">红色字体</p>
</div>
</body>
<script>
let vm=new Vue({
el:"#app",
data:{
name:"tom",
age:'23',
img:'./avatar.jpg',
id:2
}
})
</script>
</html>
v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue2.js"></script>
</head>
<body>
<!--
使用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的值唯一，不能重复
-->
<div id="app">
<p v-for="people in user ":key="people.name">{{people.name}}-{{people.age}}</p>
<p v-for="(item,index) in user " :key="item.name">{{item.name}}:{{item.age}}--{{index}}</p>
<p v-for="value,key in animal " :key="value">{{value}}</p>
<p v-for="value ,key ,index in animal" :key="value">{{value}}:{{key}}--{{index}}</p>
</div>
</body>
<script>
let vm=new Vue({
el:"#app",
data:{
user:[
{name:'tom',age:22},
{name:'yagd',age:7}
],
animal:{
name:'aaa',
age:12
}
}
})
</script>
</html>
v-model
<body>
<div id="app">
<!-- v-model指令用来双向数据绑定：就是model和view中的值进行同步变化 -->
<!-- v-model只能在input/textarea/selet -->
<input type="text" v-model="name">
<p>你输入的内容是：{{name}}</p>
</div>
</body>
<script >
let vm = new Vue({
el:"#app",
data:{
name:''
}
})
</script>
v-on
<body>
<!--
v-on指令用来监听dom事件
使用方法：
1. 在标签的属性位置写上v-on:任意的事件类型="执行的函数"
2. 简写：@任意的事件类型="执行的函数" （推荐）
3. 通过执行函数添加参数
4. 通过执行函数中添加$event参数传递事件对象，注意只能是$event,并且不能加引号
5. 事件修饰符可以给事件添加特殊功能 .stop .prevent
6. 可以给和按键相关的事件添加按键修饰符 常用的有 .enter
-->
<div id="app">
<h1>yourname:{{name}}</h1>
<button v-on:click="changeMsg">点击改变姓名</button>
<!-- 简写-->
<button @click="changeMsg">简写改变</button>
<button @click="changeMsgbytags('niubi')">传参改变</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>
</body>
<script>
let vm=new Vue({
el:"#app",
data:{
name:'tom'
},
methods:{
changeMsg(){
this.name='hhhh'
},
changeMsgbytags(arg){
this.name=arg
},
//事件
getEvent(e){
console.log(e);
},
submit(){
console.log('submit');
}
}
})
</script>
v-if和v-show
<body>
<!-- v-if和v-show指令可以用来控制元素的显示和隐藏 v-if="布尔值" v-show="布尔值" 布尔值为true元素显示，false隐藏 -->
<!-- 区别：
v-if通过控制dom来控制元素的显示和隐藏
v-show通过控制样式display:none来控制元素的显示与隐藏
使用场景区别
1. 涉及到大量dom操作的时候，我们需要使用v-show
2. 涉及到异步数据渲染的时候就要使用v-if
-->
<div id="app">
<h1>v-if</h1>
<p v-if="isVisiable">aaa</p>
<h1>v-show</h1>
<p v-if="isVisiable">bbb</p>
<button @click="isVisiable=!isVisiable">显示/隐藏</button>
<div v-if="age >18">已成年</div>
<div v-else-if="age >6">少年</div>
<div v-else>儿童</div>
</div>
</body>
<script>
let vm=new Vue({
el:"#app",
data:{
isVisiable:'true',
age:20
},
methods:{
change(){
this.isVisiable=false
}
}
})
</script>
v-cloak
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue2.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>
</body>
<script>
let vm=new Vue({
el:"#app",
data:{
msg:'hello'
}
})
</script>
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue2.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="delete(index)">删除</a>
</td>
</tr>
<tr v-if="list.length === 0">
<td colspan="4">没有品牌数据</td>
</tr>
<!-- 动态生成内容tr -->
</table>
</div>
</div>
</body>
<script>
let 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:{
addData(){
this.list.push({id:this.newId,name:this.newName,ctime:new Date()})
},
delete(idx){
this.list.splice(idx,1)
}
}
}
})
</script>
</html>
网友评论