一、vue实例
1、 创建vue实例
<script>
var vm=new Vue({
//选项
})
</script>
通过对象(选项)定义多个属性
二、el唯一根标签
- tips:vs code中,对HTML页面结构初始化方法为:先输入!然后按tab键。
(这样就省事太多了)
操作步骤:
1.引入vue.js
2.定义一个div
3.实例化vue
4.将数据显示到界面上
//下面是代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
{
{name}}
<p>
{
{name}}
</p>
</div>
<script>
var vm = new Vue({
el:'#app',//el选项 通过el将VM与div绑定,接收的是字符串
//通过el将vue实例与div进行绑定,绑定之后,vue就可以操作div及其子元素,并且数据也可以显示在div内部。
data:{
name:'vue实例绑定成功'//data数据
}
});
</script>
</body>
</html>
3、data初始数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{
{name}}</p>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
name:"定义初始数据"
}
});
console.log(vm.$data.name)
console.log(vm.name)//同第一类写法,第一类更繁琐
</script>
</body>
</html>
4、methods定义方法
在methods选项中定义showInfo()方法,实现页面内容的更新:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="showInfo">请单击</button>
<p>{
{msg}}</p>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
// msg:''
msg:'原始值'
},
methods:{
showInfo(){
//this.msg='单击触发事件'
this.msg='点击之后的内容'
}
}
})
</script>
</body>
</html>
5、computed计算属性
★响应式属性
- 计算属性其实是一个方法,但用法类似属性;
- 应用场景:当数据随其他数据变化而变化时使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>总价格:{
{
totalPrice}}</p>
<p>单价:{
{
price}}</p>
<p>数量:{
{
num}}</p>
<div>
<button @click="num==0?0:num--">
减少数量
</button>
/**
<button @click="num++">
增减数量
</button>
**/
<button @click="logTotalPrice">
打印总价格
</button>
</div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
price:20,
num:0
},
computed:{
totalPrice(){
return this.price*this.num;
}//计算属性一般返回结果,num改变,totalprice随之改变
},methods:{
logTotalPrice(){
console.log('totalPrice的结果'+this.totalPrice);//计算属性,所以无()
}
});
</script>
</body>
</html>
6、watch状态监听
用来监测vue实例中的数据变动。
7、filters过滤器
对数据进行格式化。
☆|:管道符号
使用过滤器:
①插值表达式使用:{
{data属性名 | 过滤器名称}}
②属性绑定使用:v-bind:id=‘data属性名|过滤器名称’
filters:{
toUppercase(value){
//方法
return value?value.toUpperCase():' ';
}
}
二、vue数据绑定
1、样式绑定
- 内联样式:v-bind将样式数据绑定给DOM元素
- 绑定样式:以类名定义元素样式
绑定样式是为了操作样式
2、内置指令
- v-model:主要实现数据双向绑定,通常用在表单元素上。
- v-text:在DOM元素内部插入文本内容。
- v-html:在DOM元素内部插入HTML标签内容。
- v-bind:属性单向数据绑定。
- v-on:事件监听指令,负责给DOM元素绑定事件,配合事件类型使用。
- v-for:实现列表渲染,常用来循环数组。
- v-if和v-show:控制元素显示或隐藏,属性为布尔值。
三、vue事件
1、事件监听
2、事件修饰符
.prevent:HTML标签具有自身特性,可以使用.prevent修饰符来阻止标签的默认行为。
.once:只触发一次事件处理函数。
四、vue的组件
1、组件
即自定义标签
调用:
Vue.component('参数1:组件名称',{
参数2:配置对象
data(){
}//定义组件可使用的数据
template//组件的模板,定义组件的界面
})
2、局部注册组件
components:{
//key:组件名,驼峰命名法
//value:组件的配置对象
}
3、template模板:
4、组件之间的数据传递:
props:规定组件可以通过哪些属性传递数据。
$emit:调用自定义的事件,然后传递数据。
5、组件切换
五、vue生命周期
1、钩子函数
2、实例创建
钩子函数beforeCreate和created
3、页面挂载
beforeMount和mounted:在实例创建后,如果挂载点el存在,就进行页面挂载。
4、数据更新
beforeUpdate和updated:vue实力挂载完成后,当数据发生变化时,会执行beforeUpdate和pudated钩子函数。
5、实例销毁
beforeDestroy和destroyed:生命周期函数最后阶段是实例的销毁,会执行beforeDestroy和destroyed钩子函数。
$refs:一个小细节,具体看这