基本使用
-
引入 vue.js
-
创建 vue 对象
el：指定根 element（选择器）
data：初始化数据（页面可以访问）
-
双向数据绑定：v-model
-
显示数据：
-
理解 vue 的 mvvm 实现
-
MVVM：
- model：模型，数据对象（data）
- view：视图，模板页面
- viewModel：视图模型（vue 的实例）
-
DOM Listeners 事件监听
-
Data Bindings 数据绑定
-
<div id="app">
<input type="text" />
<p>hello</p>
</div>
<script
type="text/javascript"
src="text/javascript"
src="vue-master\dist\vue.js"
></script>
<script>
//创建vue实例
var vm = new Vue({
//配置对象
el: '#app', //element:选择器
data: {
//数据（model）
username: 'ASSSS'
}
});
</script>
模板语法
双大括号表达式(( ))
<div id="app">
<p>{{msg}}</p>
<p>{{msg.toUpperCase()}}</p>
<!--全部大写函数-->
<p v-text>{{msg}}</p>
<!--解释为文本内容-->
<p v-html>{{msg}}</p>
<!--解释为标签-->
</div>
<script type="text/javascript" src="vue-master\dist\vue.js"></script>
<script>
//创建vue实例
new Vue({
//配置对象
el: '#app', //element:选择器
data: {
//数据（model）
msg: ''
}
});
</script>
指令 1：强制数据绑定
<div id="app">
<img v-bind:src="imgUrl" />
<img :src="imgUrl" />
<!--简洁写法-->
</div>
<script type="text/javascript" src="vue-master\dist\vue.js"></script>
<script>
//创建vue实例
new Vue({
//配置对象
el: '#app', //element:选择器
data: {
//数据（model）
imgUrl:
'https://cn.vuejs.orghttps://blog-1302037900.cos.ap-guangzhou.myqcloud.com/images/logo.png'
}
});
</script>
指令 2：绑定事件监听
<div id="app">
<button v-on:click="test">test1</button>
<button @click="test">test1</button>
<!--简洁写法-->
<!--test函数的传参可写可不写-->
</div>
<script type="text/javascript" src="vue-master\dist\vue.js"></script>
<script>
//创建vue实例
new Vue({
//配置对象
el: '#app', //element:选择器
ata: {
//数据（model）
},
methods: {
test() {
alert('hello');
}
}
});
</script>
计算属性和监听
计算属性
- 在 computed 属性对象中定义计算属性的方法，在页面中使用
{{方法名}}来显示计算结果
监听属性
- 通过 vm 对象的$watch()或 watch 配置来监听指定的属性，当属性变化时，回调函数自动调用，在函数内部进行计算
计算属性高级
-
通过 getter/setter 实现对属性数据的显示和监听，计算属性存在缓存，当次读取只执行一次 getter 计算
-
getter:属性的 get 方法
-
setter:属性的 set 方法
<div id="demo">
姓：<input type="text" placeholder="fn" v-model="firstName" /><br />
名：<input type="text" placeholder="ln" v-model="lastName" /><br />
姓名1(单向)：<input
type="text"
placeholder="fullName1"
v-model="fullName1"
/><br />
姓名2(单向)：<input
type="text"
placeholder="fullName2"
v-model="fullName2"
/><br />
姓名3(双向)：<input
type="text"
placeholder="fullName3"
v-model="fullName3"
/><br />
<p>{{fullName1}}</p>
<p>{{fullName2}}</p>
<p>{{fullName3}}</p>
</div>
<script type="text/javascript" src="vue-master\dist\vue.js"></script>
<script>
new Vue({
el: '#demo',
data: {
firstName: 's',
lastName: 'a',
//fullName1: 's a',
fullName2: 's a'
//fullName3: 's a'
},
computed: {
//执行条件：初始化显示/相关data属性数据发生改变
fullName1() {
//计算属性中的一个方法,方法返回值作为属性值
return this.firstName + ' ' + this.lastName;
},
fullName3: {
//回调函数 当读取当前属性值时回调 根据相关数据计算并返回当前属性值
get() {
return this.firstName + ' ' + this.lastName;
},
//回调函数 监听当前属性值的变化 当属性值发生改变时回调 更新相关的属性数据
set(value) {
//value就是fullName的最新属性值
const names = value.split(' ');
this.firstName = names[0];
this.lastName = names[1];
}
}
},
watch: {
//配置监听
firstName: function (value) {
//firstName发生了变化
this.fullName2 = value + ' ' + this.lastName;
}
}
});
vm.$watch('lastName', function (value) {
//更新fullName2
this.fullName2 = this.firstName + ' ' + value;
});
</script>
class 和 style 绑定
- 在应用界面中，某个元素的元素时变化的
- style/class 绑定就是专门用来实现动态样式效果的技术
class 绑定
:class = 'xxx'
- xxx 是字符串
- xxx 是对象
- xxx 是数组
style 绑定
:style = "{color:activeColor, fontSize:fontSize + 'px'}"
- activeColor/fontSize 是 data 属性
<div id="demo">
<h3>class绑定</h3>
<p :class="a">xxx是字符串</p>
<p :class="{aClass:isA, bClass:isB}">xxx是对象</p>
<p :class="cssArr">xxx是数组</p>
<h3>style绑定</h3>
<p :style="{color:activeColor, fontSize:fontSize + 'px'}">style</p>
<button @click="update">更新</button>
</div>
<script type="text/javascript" src="vue-master/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
a: 'aClass',
isA: true,
isB: false,
cssArr: ['aClass', 'bClass'],
activeColor: 'green',
fontSize: 20
},
methods: {
update() {
this.a = 'bClass';
this.isA = false;
this.isB = true;
this.cssArr = ['aClass'];
this.activeColor = 'blue';
this.fontSize = 12;
}
}
});
</script>
条件渲染
渲染指令
- v-if
- v-else
- v-show
<div id="demo">
<p v-if="ok">成功了</p>
<p v-else>失败了</p>
<p v-show="ok">表白成功</p>
<p v-show="!ok">表白失败</p>
<button @click="ok=!ok">切换</button>
</div>
<script type="text/javascript" src="vue-master/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
ok: false
}
});
</script>
v-if/else 和 v-show 的区别
-
v-if/else 渲染时会把需要隐藏的标签直接去除
-
v-show 渲染时只是给需要隐藏的标签加上隐藏的内联样式属性
列表渲染
<div id="demo">
<h3>测试：v-for 遍历数组</h3>
<ul>
<li v-for="(p, index) in persons" :key="index">
{{index}}----{{p.name}}----{{p.age}} ----<button
@click="deletePerson(index)"
>
删除
</button>
----<button @click="updatePerson(index, {name:'cat',age:10})">更新</button>
</li>
</ul>
<h3>测试：v-for 遍历对象</h3>
<ul>
<li v-for="(value, key) in persons" :key="key">{{key}}----{{value}}</li>
</ul>
<ul>
<li v-for="(value, key) in persons[0]" :key="key">{{key}}----{{value}}</li>
</ul>
</div>
<script type="text/javascript" src="vue-master/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
//vue只是监听了persons的改变，没有监听数组内部的变化
//vue重写了数组中的一系列改变数组内部数据的方法(先调用原 生，再更新界面)
persons: [
{ name: 'Tom', age: 18 },
{ name: 'Jack', age: 19 },
{ name: 'Bobe', age: 15 },
{ name: 'Rose', age: 20 }
]
},
methods: {
deletePerson(index) {
this.persons.splice(index, 1);
},
updatePerson(index, newPerson) {
//没有改变persons本身,数组内部数据改变，但是没有调用变异方法，因此界面没有发生改变
//this.persons[index] = newPerson
this.persons.splice(index, 1, newPerson);
}
}
});
</script>