1.Helloword
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Helloword</title>
</head>
<body>
<!--
1. 引入Vue.js
2. 创建Vue对象
el : 指定根element(选择器)
data : 初始化数据(页面可以访问)
3. 双向数据绑定 : v-model
4. 显示数据 : {{xxx}}
5. 理解vue的mvvm实现
-->
<div id="app">
<input type="text" v-model="username">
<p>Hello {{username}}</p>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 创建Vue实例（Vue是一个vue.js库提供的构建函数）
const vm = new Vue({
el:'#app',//element:选择器，表明将页面哪个元素交给Vue管理
data:{
username:'Vue'
}
})
vm.username = 'kebi';
</script>
<!--
MVVM：
Model：模型，数据对象（data）
View：视图，模板页面
ViewModel：视图模型（Vue的实例
</body>
</html>
2.模板语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_模板语法</title>
</head>
<body>
<!--
1. 模板的理解:
动态的html页面
包含了一些JS语法代码
大括号表达式
指令(以v-开头的自定义标签属性)
2. 双大括号表达式
语法: {{exp}}
功能: 向页面输出数据
可以调用对象的方法
3. 指令一: 强制数据绑定
功能: 指定变化的属性值
完整写法:
v-bind:xxx='yyy' //yyy会作为表达式解析执行
简洁写法:
:xxx='yyy'
4. 指令二: 绑定事件监听
功能: 绑定指定事件名的回调函数
完整写法:
v-on:click='xxx'
简洁写法:
@click='xxx'
-->
<div id="app">
<h2>1. 双大括号表达式</h2>
<p>{{msg}}</p><!-- textContent -->
<p>{{msg.toUpperCase()}}</p>
<p v-text="msg"></p><!-- textContent -->
<p v-html="msg"></p><!-- innerHTML -->
<h2>2. 指令一: 强制数据绑定</h2>
<!-- <img src="imgUrl" alt="大V"> -->
<!-- <img v-bind:src="imgUrl" alt="大V"> -->
<img :src="imgUrl" alt="大V">
<h2>3. 指令二: 绑定事件监听</h2>
<!--<button v-on:click="test">test1</button>-->
<!--<button @click="test2('abc')">test2</button>-->
<button @click="test2(msg)">test2</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
// msg: 'I Will Back!'
msg: '<a href="http://www.baidu.com">百度网</a>',
imgUrl: 'https://cn.vuejs.org/images/logo.png'
},
methods: {
test(){
alert('hihi~~');
},
test2(content){
alert(content);
}
}
})
</script>
</body>
</html>
3.条件渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
</head>
<body>
<!--
1. 条件渲染指令
v-if
v-else
v-show
2. 比较v-if与v-show
如果需要频繁切换 v-show 较好
-->
<div id="demo">
<p v-if="ok">成功了</p>
<p v-else="true">失败了</p>
<p v-show="ok">表白成功</p>
<p v-show="!ok">表白失败</p>
<button @click="ok=!ok">切换</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#demo',
data:{
ok:false
}
})
</script>
</body>
</html>
4.class与style绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class与style绑定</title>
<style type="text/css">
.aClass{
color: red;
}
.bClass{
color: blue;
}
.cClass{
font-size: 30px;
}
</style>
</head>
<body>
<!--
1. 理解
在应用界面中, 某个(些)元素的样式是变化的
class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class='xxx'
xxx是字符串
xxx是对象
xxx是数组
3. style绑定
:style="{ color: activeColor, fontSize: fontSize + 'px' }"
其中activeColor/fontSize是data属性
-->
<div id="demo">
<h2>1. class绑定: :class='xxx'</h2>
<p class="cClass" :class="a">xxx是字符串</p>
<p :class="{aClass: isA, bClass: isB}">xxx是对象</p>
<p :class="['aClass', 'cClass']">xxx是数组</p>
<h2>2. style绑定</h2>
<p :style="{color: activeColor, fontSize: fontSize + 'px'}">style绑定</p>
<button @click="update">更新</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
a: 'aClass',
isA: true,
isB: false,
activeColor: 'red',
fontSize: 20
},
methods: {
update(){
this.a = 'bClass';
this.isA = false;
this.isB = true;
this.activeColor = 'green';
this.fontSize = 30;
}
}
})
</script>
</body>
</html>
5.计算属性和监视
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性和监视</title>
</head>
<body>
<!--
1. 计算属性
在computed属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:
通过通过vm对象的$watch()或watch配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
通过getter/setter实现对属性数据的显示和监视
计算属性存在缓存, 多次读取只执行一次getter计算
getter：属性的get方法
setter：属性的set方法
-->
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
<!--fullName1是根据fistName和lastName计算产生-->
姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>
<p>{{fullName1}}</p>
<p>{{fullName1}}</p>
<p>{{fullName1}}</p>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el: '#demo',
data: {
firstName: 'A',
lastName: 'B',
// fullName1: 'A B'
fullName2: 'A B'
},
computed: {
// 什么时候执行：初始化显示/相关的data属性数据发生改变
// 计算并返回当前属性的值
fullName1(){//计算属性的一个方法，方法的返回值作为属性值
console.log('fullName1()');
return this.firstName + ' ' + this.lastName;
},
fullName3: {
/*
回调函数要满足3个条件：
1、你定义的；
2、你没有调用；
3、但最终它执行了
什么时候调用？
用来做什么？
*/
// 回调函数，当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性的值
get(){
return this.firstName + ' ' + this.lastName;
},
// 回调函数，监视当前属性值的变化，当属性值发生改变时回调，更新相关的属性数据
set(value){// value就是fullName3的最新属性值
const names = value.split(' ');
this.firstName = names[0];
this.lastName = names[1];
}
}
},
watch: {//配置监视
firstName: function(value){//firstName发生了变化
console.log(this);//就是VM对象
this.fullName2 = value + ' ' + this.lastName;
}
}
})
vm.$watch('lastName', function(value){
// 更新fullName2
this.fullName2 = this.firstName + ' ' + value;
});
</script>
</body>
</html>
网友评论