浅谈Vue--直接引入Vue.js实现简单地开发
1. Vue介绍
Vue是一个MVVM的JavaScript框架; ViewModel负责逻辑的实现,把Model里的数据传递给View,实现视图层与数据层的解耦
2.Vue的开发方式: 2.1 通过直接引入Vue.js实现简单地开发
引入vue.js文件: <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
基本框架:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本框架</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
let app = new Vue({
el:'#app',
data:{},
methods:{},
});
</script>
</body>
</html>2.2 使用Vue CLI脚手架工具进行开发
3. Vue的数据绑定
3.1 值绑定
3.1.1 {{}} -- 插值表达式
<h2>{{msg}}</h2>
//script里的data
data:{
msg:'Hello, Vue!',
},3.1.2 使用 v-text 和 v-html 进行数据绑定
注意 -- v-text和v-html的区别: v-text会将数据原样输出(插值表达式也会将数据原样输出) v-html如果数据里有标签,会将其解析在输出
文本闪烁问题: 当我们使用外部引入vue.js的方式进行开发时,如果vue.js文件没有及时加载,导致系统无法识别vue的语法,原vue语法会原样输出 解决办法: 1.在head标签里引入vue.js文件 2.使用v-cloak指令专门用来解决文本闪烁问题. 我们自己会给添加了v-cloak指令的元素设置 display:none;先让其元素隐藏,等到vue.js文件加载之后v-cloak起效果,会将之前隐藏的元素 display设置为 block.
3.2 属性绑定
在vue里,属性不区分HTML属性和DOM属性
3.2.1 语法: v-bind: 属性名='值' 简写为 :属性名='值'
3.2.2 动态绑定元素样式
动态绑定class属性 -- :class='对象/数组'
动态绑定style属性 -- :style='对象/数组'
<style type="text/css">
[v-cloak] {
display: none;
}
img{
width: 600px;
height: 300px;
}
.bgc{
background-color: #fff6d6;
}
.fontS{
font-size: 25px;
}
.fontC{
color: red;
}
</style>
<body>
<div class="div1" :class="{bgc:true,fontC:true}">
class属性绑定值是对象
</div>
<div class="div1" :class="['bgc','fontS','fontC']">
class属性绑定值是数组
</div>
<p :style="{width:'200px',height:'200px',backgroundColor:'#B6CCC8'}">
style属性绑定对象
</p>
<p :style="[{width:'200px'},{height:'200px'},{backgroundColor:'#B6CCC8'},{border:'1px solid black'}]">
style属性绑定数组
</p>
</body>3.3 事件绑定 语法 -- v-on: 事件名='表达式', 如果值是 '函数名()',小括号可加(传参)可不加(不传参) 简写-- @事件名='表达式'
vue的事件修饰符 1.普通事件 stop:阻止事件的传播 prevent:阻止默认事件的执行 once:一次性事件 2.键盘事件
<h3>普通事件</h3>
<div @click="parentClick">
<button @click.stop="btnClick">子级按钮</button>
<a href="http://www/baidu.com" @click.prevent>点击跳转百度</a>
<button @click.once.stop="onceClick" :disabled="disAble">一次点击</button>
</div>
<h3>键盘事件</h3>
<input type="text" @keyup.left.right="keyInput">
//script里的methods
methods:{
parentClick(){
alert('父级事件被触发!')
},
btnClick(){
alert('子级事件被触发!')
},
onceClick(){
this.disAble=true
},
keyInput(){
console.log('键盘抬起!')
}
}3.4 双向数据绑定
v-model='变量'
<!--双向数据绑定-->
<fieldset>
<legend><h1>双向数据绑定</h1></legend>
<input type="text" v-model="inputV">
<p>{{inputV}}</p>
</fieldset>
//script里的data
data:{
inputV:'默认值',
},4. Vue指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--
1.v-if 控制元素的显隐
v-if和v-show的区别:
v-if真正意义上从dom树种移除或者增加元素
v-show只是控制元素的display样式
-->
<h2 v-if="false">我是v-if的h2标签</h2>
<h2 v-show="false">我是v-show的h2标签</h2>
<hr/>
<!--
2.v-for 列表渲染
语法:
v-for='(集合里的值,下标) in 集合'
:key vue是虚拟DOM,设置key可以提高浏览器的渲染效率,key的值一般给数据里能起到唯一标识作用的值,如果没有,也可以给index
-->
<ul>
<li v-for="(per,index) in infoArr" :key="index">
<span>这是第{{index+1}}个人的信息</span>
<span>{{per.name}}</span>
<span>{{per.age}}</span>
<span>{{per.sex}}</span>
</li>
</ul>
<!--
结合template标签实现v-for的列表渲染
template标签在渲染时不会被加载
template标签不能加key属性
-->
<ul>
<template v-for="(per,index) in infoArr">
<span>这是第{{index+1}}个人的信息</span>
<span>{{per.name}}</span>
<span>{{per.age}}</span>
<span>{{per.sex}}</span>
</template>
</ul>
</div>
<script type="text/javascript">
let app = new Vue({
el:'#app',
data:{
infoArr:[
{name:'阿音',age:22,sex:'女'},
{name:'朱一龙',age:31,sex:'男'},
{name:'白宇',age:29,sex:'男'},
{name:'李白',age:50,sex:'男'},
{name:'纳兰容若',age:40,sex:'男'}
]
},
methods:{
}
})
</script>
</body>
</html>5. Vue数组和对象的监测
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组和对象的监测</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="v in dataArr">{{v}}</li>
</ul>
<ul>
<li v-for="item in perArr">{{item.name}}</li>
</ul>
<button @click="btnClick">点击</button>
<button @click="changeV">点击改变数组里的值</button>
<button @click="changePerV">点击改变per数组里的值</button>
<hr>
<p v-for="(value, key) in person">{{value+'---'+key}}</p>
<button @click="person.age = 50">点击修改person的age</button>
<button @click="addKV">点击添加键值对</button>
<button @click="replacePerson">点击整体替换person</button>
<button @click="deleteHobby">点击删除hobby</button>
</div>
<!--
关于vue里数组和对象的监测:
1.数据的更新监测
以下方法操作数组,都可以引起页面的直接更新渲染
push,pop,unshift,shift,splice,sort,reverse
以下方法操作数组,不会引起页面的直接更新渲染,除非再给原数组重新赋值一遍
filter,map,concat,slice
只修改数组里的值,也不会引起页面的重新渲染
解决办法:
写法1:Vue.set(数组,下标,新值);
写法2: Vue实例,$set(数组,下标,新值)
2.对象的监测
通过已有的key更新value或者直接整体替换对象都可以引起页面的更新渲染,但是给对象新增键值对不会引起页面的更新渲染
解决方法:
写法一: Vue.set(对象,新key,新value)
一次添加多个键值对
Object.assign({},对象,{多个键值对})
写法二:
Vue实例.$set(对象,新key,新value);
删除键值对
写法1: Vue.delete(对象,key)
写法2: Vue实例.$delete(对象,key)
-->
<script type="text/javascript">
let app = new Vue({
el:'#app',
data:{
dataArr:[1, 2, 3, 4, 5],
perArr:[
{name:"abc"},
{name:"def"},
{name:"ghi"}
],
person:{
name:'蔡徐坤',
age:20,
sex:'男',
hobby:'篮球,rap'
}
},
methods:{
btnClick() {
this.dataArr = this.dataArr.filter(function (v) {
return v > 3;
})
},
changeV() {
//不能实现
// this.dataArr[0] = 100;
Vue.set(this.dataArr,0,100);
},
changePerV() {
//能实现
// this.perArr[0].name = "阿音";
//不能实现
// this.perArr[1] = {name:'阿音'};
app.$set(this.perArr,1,{name:'阿音'});
},
addKV() {
//不能实现
// this.person.id = '队长';
// console.log(this.person);
// Vue.set(this.person,'id','队长');
// this.person=Object.assign({},this.person,{id:'对象',team:'NBA'});
// this.person={...this.person,id:'对象',team:'NBA'};
app.$set(this.person,'id','啦啦队');
},
replacePerson() {
this.person = {name:'吴亦凡', hobby:'rap', project:'你看这个碗它又大又圆'};
},
deleteHobby(){
Vue.delete(this.person,'hobby');
}
}
})
</script>
</body>
</html>