目录
1.1 VUE的基本使用
有input要加上v-model
<!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>why</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="/vue/vue.js"></script>
<script type="text/javascript" >
const vm=new Vue({
el:'#app',
data:{
username:''
}
})
</script>
</body>
</html>
效果：输入框输入啥 下面就显示什么
1.2 理解MVVM
2. 模板语法
双大括号表达式
第二个是转换成大写的 里面就相当于js语法一样 那些方法
<div id="app">
<input type="text" v-model="username">
<p>Hello {{username}}</p>
<p>Hello {{username.toUpperCase()}}</p>
</div>
<script type="text/javascript" src="/vue/vue.js"></script>
<script type="text/javascript" >
const vm=new Vue({
el:'#app',
data:{
username:''
}
})
</script>
指令一：强制数据绑定 ：
<div id="a<script type="text/javascript" src="/vue/vue.js"></script>
<script type="text/javascript" >
const vm=new Vue({
el:'#app',
data:{
username:'',
imgUrl:'https://imgoss.ilive.cn/image/202104/13/1618302927248_365x204.jpg'
}
})
</script>pp">
<img src="imgUrl">
<img v-bind:src="imgUrl">
<img :src="imgUrl">
</div>
指令二.绑定事件监听@
<div id="app">
<input type="text" v-model="msg">
<p>Hello {{msg}}</p>
<p>Hello {{msg.toUpperCase()}}</p>
<img src="imgUrl">
<img v-bind:src="imgUrl">
<img :src="imgUrl">
<h1>指令二.绑定事件监听</h1>
<button v-on:click="test">test按钮</button>
<button @click="test2(msg)">test2按钮</button>
</div>
<script type="text/javascript" src="/vue/vue.js"></script>
<script type="text/javascript" >
const vm=new Vue({
el:'#app',
data:{
msg:'',
imgUrl:'https://imgoss.ilive.cn/image/202104/13/1618302927248_365x204.jpg'
},
methods:{
test(){
alert('test按钮')
},
test2(content){
alert(content)
},
}
})
3.计算属性和监视
1.计算属性
在computed属性对象中定义计算属性的方法在页面中使用{{方法名}}来显示计算的结果
2.监视属性:
通过通过vm对象的$watch()或watch配置来监视指定的属性当属性变化时，回调函数自动调用，在函数内部进行计算
3.计算属性高级:
通过getter/setter实现对属性数据的显示和监视计算属性存在缓存，多次读取只执行一次getter计算
computed
<div id="app">
<input type="text" v-model="msg1">
<input type="text" v-model="msg2">
<input type="text" v-model="msg3">
</div>
<script type="text/javascript" src="/vue/vue.js"></script>
<script type="text/javascript" >
const vm=new Vue({
el:'#app',
data:{
msg1:'1',
msg2:'2',
},
computed:{
msg3(){
return this.msg1+this.msg2
}
}
})
</script>
watch
<div id="app">
<input type="text" v-model="msg1">
<input type="text" v-model="msg2">
<input type="text" v-model="msg3">
<input type="text" v-model="msg4">
</div>
<script type="text/javascript" src="/vue/vue.js"></script>
<script type="text/javascript" >
const vm=new Vue({
el:'#app',
data:{
msg1:'1',
msg2:'2',
},
computed:{
msg3(){
return this.msg1+this.msg2
}
},
watch:{
msg1:function(value){
this.msg4=value+' '+this.msg2;
}
}
})
vm.$watch('msg2',function(value){
this.msg4=this.msg1+' '+value
})
</script>
给两个加上watch