一、基本使用流程
1)引入vue.js
<script type="text/javascript" src="../js/vue.js"></script>
2)创建vue对象
el:指定根element(选择器)
data:初始化数据(页面可以访问)
3) 双向数据绑定
4)显示数据 使用{{XXX}}%
5)第一个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue学习的第一个HelloWorld</title>
</head>
<body>
<!--1.引入vue.js
2.创建vue对象
el:指定根element(选择器)
data:初始化数据(页面可以访问)
3.双向数据绑定;v-model
4.显示数据:{{xxx}}
5.理解vue的MVVM实现
MVVM
model:模型 ,数据对象data
view :视图,模板页面
viewModel:视图模型,vue的实例
-->
<div id="app"><!--view-->
<input type="text" v-model="message">
<p>hello {{message}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
//创建Vue实例
const vm = new Vue({//配置对象 option
el: '#app', //element : 选择器
data: { //数据(model)
message: '旋舞的水晶叶'
},
methods:{
}
})
</script>
</body>
</html>
展示结果:
二、 模板语法
2.1 MVVM的理解
MVVM:是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定
M:model 模型 本质是数据对象data
V:view 视图 本质是模板页面
VM:view Model 视图模型 本质就是Vue的实例
<script type="text/javascript">
//创建Vue实例
const vm = new Vue({//配置对象 option
el: '#app', //element : 选择器
data: { //数据(model)
message: '旋舞的水晶叶'
},
methods:{
}
})
</script>
2.2 模板的理解
动态的html页面包一些JS语法代码 双大括号表达式 指令以V开头的自定义标签属性
2.3 双大括号表达式
语法:{{}} 或者{{{}}}
功能:向页面数出数据
可以调用对象的方法
2.4 指令一:强制数据绑定
功能:指定变化的属性值
完整写法: v-bind='xxx' //xxx会作为表达式解析执行
简洁写法: :bind='xxx'
2.5 指令二:绑定事件监听
功能:绑定指定事件名的回调函数
完整写法: v-on:click="yyy"
简洁写法:@click='yyy'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1 模板的理解
动态的Html页面
包含一些js 语法代码
双大括号表达式
指令 以V开头的自定义标签属性
2 双大括号表达式
语法:{{}} 或者{{{}}}
功能:向页面输出数据
可以调用对象的方法
3 指令一:强制数据绑定
功能:指定变化的属性值
完整写法: v-bind='xxx' //xxx会作为表达式解析执行
简洁写法: :bind='xxx'
4.指令一:绑定事件监听
功能:绑定指定事件名的回调函数
完整写法: v-on:click="yyy"
简洁写法:@click=''
-->
<div id="app"><!--view-->
<p> {{message}}</p> <!--textContext-->
<h2>1.双大括号表达式</h2>
<p> {{msg}}</p>
<p> {{msg.toUpperCase()}}</p>
<p v-text="mess"> </p><!--textContext-->
<p v-html="mess"> </p><!--innerHTML-->
<p>{{msg}}</p>
<h2>2.强制数据绑定</h2>
<img v-bind:src="imgUrl">
<img :src="imgUrl">
<h2>3.绑定数据监听</h2>
<button v-on:click="test()">test1</button>
<button @click="test()">test1</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app', //element : 选择器
data: { //数据(model) data 的所有属性都会成为vm对象的属性,而模板页面中可以直接访问
message: '旋舞的水晶叶在复习Vue模板语法',
msg:'i love you ge xing',
mess:'<a href="https://www.baidu.com">点击进入百度</a>',
imgUrl:'https://cn.vuejs.org//images/logo.png'
},
methods:{
test(){
console.log("test");
}
}
});
</script>
</body>
</html>
页面展示结果:
三、计算属性和监视
3.1 计算属性
在computed属性对象中定义计算属性的方法 ,在页面中使用{{方法名}}来显示计算的结果
3.2 监视属性
通过vm对象的$watch()或者watch配置来监视指定的属性,当属性变化时,回调函数自动调用,在函数内部进行计算
3.3 计算属性高级
通过getter 和setter实现对属性数据的显示和监视 ,计算属性存在缓存,多次读取只执行一次gettte计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性与监视</title>
</head>
<body>
<!--
1.计算属性
在computed属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果
2.监视属性
通过vm对象的$watch()或者watch配置来监视指定的属性
当属性变化时,回调函数自动调用,在函数内部进行计算
3.计算属性高级
通过getter 和setter实现对属性数据的显示和监视
计算属性存在缓存,多次读取只执行一次gettte计算-->
<div id="demo">
姓:<input type="text" placeholder="FirstName" v-model="firstName"/><br/>
名:<input type="text" placeholder="LastName" v-model="lastName"/><br/>
姓名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', //element : 选择器
data:{
firstName:'旋舞',
lastName:'的水晶叶',
fullName2:'的水晶叶'
} ,
computed:{//计算属性中一个方法,方法的返回值为属性值
//什么时候执行:初始化显示 相关的data属性数据发生改变
fullName1(){
console.log("fullName1()");
return this.firstName+" " +this.lastName;
},
fullName3:{
//回调函数 三要素 1、你定义的,2、你没调 3、最后执行了
//什么时候调用 ? 用来干嘛的?
//回调函数 计算并返回当前属性的值
get(){
return this.firstName+" " +this.lastName;
},
//回调函数 当属性值发生改变时回调更新相关的属性数据
set(value){//value 就是fullName3最新属性值
const fullNames= value.split(" ");
this.firstName=fullNames[0];
this.lastName=fullNames[1];
}
}
},
watch:{
firstName: function (value) {//fistName发生改变
console.log("this"+this);//就是Vm对象
this.fullName2=value+" " +this.lastName;
}
}
})
vm.$watch('lastName',function (value) {
//更新fullName2
this.fullName2=this.firstName+" " +value;
})
</script>
</body>
</html>
运行结果:
四、class与style绑定
4.1 理解
在应用界面中,某个或者某些元素的样式是变化的,class/style绑定就是专门用来实现动态样式绑定效果的技术
4.2 class绑定
class 绑定 :class='xxx'
xxx是字符数组
xxx是对象
xxx是数组
4.3 style绑定
:style="{ color : activeColor ,fontSize:fontSize+'px'}"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class与style的绑定</title>
<style>
.aClass {
color:red;
}
.bClass{
color:blue;
}
.cClass{
font-size: 40px;
}
</style>
</head>
<body>
<!--
1.理解
在应用界面中,某个或者某些元素的样式是变化的
class/style绑定就是专门用来实现动态样式绑定效果的技术
2.class 绑定 :class='xxx'
xxx是字符数组
xxx是对象
xxx是数组
3.style绑定
:style="{ color : activeColor ,fontSize:fontSize+'px'}"
-->
<div id="demo">
<h2>1.class绑定 : :class="xxx"</h2><br/>
<p :class="a" class="cClass">xxx是字符串</p>
<p :class="{aClass:isA,bClass:isB}" >xxx是对象</p>
<p :class="['aClass','cClass']" >xxx是数组</p>
<h2>2.style绑定</h2><br/>
<p :style="{ color : activeColor ,fontSize:fontSize+'px'}" >:style="{ color : activeColor ,fontSize:fontSize+'px'}"</p>
<button @click="update">更新</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
const vm=new Vue({
el:"#demo",
data:{
a:'aClass',
isA:true,
isB:false,
activeColor:'green',
fontSize:30
},
methods:{
update(){
this.a='bClass';
this.isA=false;
this.isB=true;
this.activeColor='pink'
this.fontSize=20
}
}
});
</script>
</body>
</html>
运行结果:
'