一.初识Vue
1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
2.root容器里的代码依然符合htm1规范,只不过混入了一些特殊的Vue语法;
3.root容器里的代码被称为[Vue模板]:
4.Vue实例和容器是一一对应的;
5.真实开发中只有一个vue实例,并且会配合着组件一起使用;
6.{{xxx}中的xxx要写is表达式,且xxx可以自动读取到data中的所有属性
7.一旦data中的数据发生改变,那么页面中用到该数据的地方也会改变
<body>
<div id="first">
<h1>你好,{{name}}</h1>
</div>
<script type="text/javascript">
//阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false
//创建vue实例
new Vue({
el:'#first',//e1用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串。
data:{ //data中用于存储数据,数据供e1所指定的容器去使用,值我们暂时先写成一个对象。
name:'刘懿儇'
}
})
</script>
</body>
二.模板语法
Vue模板语法有2大类: 1.插值语法: 功能:用于解析标签体内容。 写法: {{xxx]},xxx是js表达式,且可以直接读取到data中的所有属性
2。指令语法 功能:用于解析标签(包括: 标签属性、标签体内容、绑定事件.....>
举例: v-bind:href="xxx”或 简写为 :href="xxx",xxx
同样要写js表达式且可以直接读取到data中的所有属性。
备注: Vue中有很多的指令,且形式都是: v-????,此处我们只是拿v-bind举个例子。
<body>
<!-- 准备好一个容器-->
<h1>dddddddddddd</h1>
<div id="aaa">
<h1>插值语法</h1>
<h3>你好,{{name1}}</h3>
<hr />
<h1>指令语法</h1>
<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a><br>
<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
new Vue({
el: '#aaa',
data: {
name1: 'jack',
school: {
name: '你猜',
url: 'http://www.atguigu.com',
}
}
})
</script>
三.数据绑定
Vue中有2种数据绑定的方式:
1.单向绑定(v-bind): 数据只能从data流向页面。
2.双向绑定(y-model): 数据不仅能 从data流向页面,还可以从页面流向data。
备注: 1.双向绑定一般都应用在表单类元素上(如: input、select等) 2.V-model:value 可以简写为 v-model,因为v-model默认收集的就是value值
<body>
<div id="root">
<label>
单项数据绑定:
<!--<input type='text' v-bind:value="name"/>-->
<!--简写-->
<input type='text' :value="name"/>
</label>
<label>
双向数据绑定:
<!--<input type='text' v-model:value="name"/>-->
<input type='text' v-model="name"/>
</label>
<br/>
<!--
不是什么都可用v-model的 这里v-model不支持h1
v-model只能应用在表单元素上(输入元素),与用户交互(都有共同的value属性)
-->
<h1 v-bind:x="name">
你好啊
</h1>
</div>
<script type="text/javascript">
//v-bind可以完成数据绑定(单项绑定)
//v-model双向数据绑定
//单项数据绑定 双向数据绑定
Vue.config.productionTip = false;
new Vue({
el: '#root',
data:{
name: 'shanghai'
}
})
</script>
</body>
四.el 和 data的两种写法
1.el有2种写法
(1).new Vue时候配置el届性。
(2).先创建Vue实例,随后再通过vm.$mount('#root)指定el的值。
2.data有2种写法
(1).对象式
(2).函数式如何选择: 目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错
3.一个重要的原则:
由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了,就会变成windows页面本身了
<body>
<div id="root">
<h1>你好,{{ name }}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
//el的两种写法
// const v = new Vue({
// // el: '#root', //第一种写法
// data: {
// name: '上海'
// }
// });
//
// // console.log(v);
// //关联root容器,用mount方法
// setTimeout(() => {
// v.$mount('#root'); //第二种写法 挂载到页面上
// }, 3000)
//data的两种写法
new Vue({
el: '#root',
//data的第一种写法:对象式
// data: {
// name: 'shanghai'
// }
//第二种写法: 函数式(返回对象中包含你想渲染的模版数据)
//学习组件的时候要是用函数式 这个函数是Vue来调用的
// data: () => {
// console.log(`@@@@`, this); //此时this是window,因为箭头函数没有自己的this,它向外查找找到的window
// return ({
// name: 'shanghai'
// })
// }
//尽量不要写成剪头函数,因为会丢失this
data (){
console.log('@@@', this); //此时this是Vue
return {
name: 'shanghai'
}
}
});
</script>
</body>
</html>
五.MVVM模型
MVVM模型
1.M: 模型(Model) : data中的数据 2。V:视图(view) : 模板代码 3。VM: 视图模型(viewModel): Vue
实例观察发现:
1.data中所有的属性,最后都出现在vm身上。 2.vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用
<body>
<div id="root">
<!--view-->
<h1>学校名称: {{ name }}</h1>
<h1>学校地址:{{ address }}</h1>
<h1>测试一下1: {{ 99+1 }}</h1>
<!--所有viewModel和vue原型上的属性在视图中的{{}}都可以看到-->
<!-- <h1>测试一下2: {{ $options }}</h1>-->
<!-- <h1>测试一下3: {{ $emit }}</h1>-->
<!-- <h1>测试一下4: {{ _c }}</h1>-->
</div>
<script type="text/javascript">
//view model view与model之间的纽带
//vm view实例对象
const vm = new Vue({
el: '#root',
data(){
//model
return {
name:'科院',
address: '新乡'
}
}
});
console.log(vm);
</script>
</body>
</html>
六.数据代理
1.Vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处:
更加方便的操作data中的数据
3.基本原理:
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性,都指定一个getter/setter。
在getter/setter内部去操作(读/写)data中对应的属性。
<body>
<div id="root">
<h2>学校名称:{{ name }}</h2>
<h2>学校地址: {{ address }}</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
let data;
//通过vm代理
const vm = new Vue({
el:'#root',
//vm._data === options.data = data
//
data(){
return data = {
name:'panyue',
address:'shanghai'
}
}
});
</script>
</body>
七.事件处理
1.事件修饰
Vue中的事件修饰符:
1.prevent:阻止默认事件(常用);
2.stop:阻止事件冒泡(常用);
3.once:事件只触发一次(常用);
4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素时才触发事件;
6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
<body>
<div id="root">
<h1>欢迎来到 {{ name }}</h1>
<!--阻止默认事件(常用-->
<a href="https://www.baidu.com" @click.prevent="showInfo" >点我提示信息</a>
<!--阻止事件冒泡(常用)-->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
<!--修饰符也可以连用,例如下面事例是即阻止冒泡同时也阻止默认行为-->
<!--<a href="https://www.google.com.tw" @click.prevent.stop="showInfo">谷歌台湾</a>-->
</div>
<!--事件只触发一次-->
<button @click.once="showInfo">点我提示信息,只在第一次点击生效</button>
<!-- capture事件的捕获模式 让事件以捕获的方式来处理(先捕获再冒泡)-->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">div2</div>
</div>
<!-- self 只有event.target是当前操作的元素时才触发事件(变相阻止冒泡)-->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我提示信息</button>
</div>
<!--passive:事件的默认行为立即执行,无需等待事件回调执行完毕;-->
<!--scroll滚动条一滚动就会触发的事件 wheel鼠标滚轮事件-->
<ul class="list" @scroll.passive="demo">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type='text/javascript'>
Vue.config.productionTip = false;
new Vue({
el: "#root",
data:{
name: 'Shanghai'
},
methods:{
showInfo(e){
// e.preventDefault(); 阻止a标签默认行为
// e.stopPropagation() //阻止事件冒泡
// alert('你好');
console.log(e.target);
},
showMsg(msg){
console.log(msg);
},
demo(){
// console.log(`@`)
// for(let i = 0; i < 100000; i++){
// console.log('#')
// }
// console.log('累了')
}
}
});
</script>
</body>
2. 事件的基本使用
事件的基本使用:
1.使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名;
2.事件的回调需要配置在methods对象中,最终会在vm上;
3.methods中配置的函数,不要用箭头函数!否则this就不是vm了;
4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象;
5.@click="demo" 和 @click="demo($event)" 效果一致,但后者可以传参;
<body>
<div id="root">
<!--指令语法 v开头 例如v-on:click点击事件-->
<h1>欢迎 {{ name }} </h1>
<button v-on:click="showInfo1">点我提示信息1</button>
<!--简写形式 @click-->
<button @click="showInfo2($event,66)">点我提示信息2</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data(){
return {
name: 'shanghai',
}
},
//methods配置事件处理的回调函数
methods:{
showInfo1(e){
//默认给你传递event参数
//当是箭头函数的话this那就是window
console.log(this === vm); //this是vue实例
console.log('你好');
},
//接收参数
showInfo2(e,num){
console.log(e.target);//
console.log(`接收参数:${num}`);
}
}
});
</script>
</body>
3.键盘事件
1.Vue中常用的按键别名:
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊,必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
2.Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)
3.系统修饰键(用法特殊):ctrl、alt、shift、meta
(1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。
(2).配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具体的按键(不推荐)
5.Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名
<body>
<div id="root">
<!--vue中键盘事件的绑定 一般用keyUp(keydown)-->
<h1>欢迎来到{{ name }}</h1>
<input type="text" @keyup.enter="showInfo" placeholder="按下回车提示输入"/>
<input type="text" @keyup.delete="showInfo" placeholder="退格或删除提示输入"/>
<input type="text" @keyup.esc="showInfo" placeholder="按下esc提示输入"/>
<input type="text" @keydown.tab="showInfo" placeholder="按下tab示输入"/>
<input type="text" @keyup.ctrl="showInfo" placeholder="按下command提示输入"/>
<input type="text" @keydown.p="showInfo" placeholder="按下p提示输入"/>
<!--键盘事件的修饰符也可以连用-->
<input type="text" @keydown.command.g="showInfo" placeholder="按下command和g提示输入"/>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name: 'shanghai'
},
methods:{
showInfo:function (e){
// if(e.keyCode === 13) {
// console.log(e.target.value);
// }
console.log(e.target.value);
console.log(e.key); //按下的名字
}
}
})
</script>
</body>
八.计算属性
案例--插值语法实现
<body>
<div id="root">
<!--v-model双向绑定-->
姓:<input type="text" v-model="firstName"/>
<br/><br/>
名:<input type="text" v-model="lastName"/>
<br/><br/>
全名: <span>{{ firstName.slice(0,3) }} - {{ lastName }}</span>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
firstName:'张',
lastName: '三'
}
});
</script>
</body>
案例--methods方法实现
<body>
<div id="root">
<!--v-model双向绑定-->
姓:<input type="text" v-model="firstName"/>
<br/><br/>
名:<input type="text" v-model="lastName"/>
<br/><br/>
<!--methods方法调用之后进行插值-->
<!--data中的数据发生变化的话,要重新解析和react类似,state一变化页面重新render-->
全名: <span>{{ fullName() }}</span>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data: {
firstName: '张',
lastName: '三'
},
methods:{
fullName(){
return `${this.firstName.slice(0,3)} -- ${this.lastName}`
}
}
});
</script>
</body>
案例-计算属性实现
<body>
<div id="root">
<!--
计算属性:
1.定义:要用的属性不存在,要通过已有属性计算得来。
2.原理:底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行?
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
5.备注:
1.计算属性最终会出现在vm上,直接读取使用即可。
2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。
-->
<!--v-model双向绑定-->
姓:<input type="text" v-model="firstName"/>
<br/><br/>
名:<input type="text" v-model="lastName"/>
<br/><br/>
测试:<input type="text" v-model="test"/>
<br/><br/>
全名: <span>{{ fullName }}</span>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
//data里的都是属性
firstName: '张',
lastName: '三',
test:'test'
},
//计算属性--> 旧属性加工
computed: {
fullName: {
//get的作用,当读取fullName时get就会被调用,且返回值就做为fullName的值
//defineProperty
//注意vm._data是不存在计算属性的
//计算属性算完之后直接丢到了viewModel实例对象身上
/**
* get的调用时机
* 1.初次读取计算属性时
* 2.所依赖的数据(data中的属性)发生变化时,不改变的话直接读缓存
* 3.methods没有缓存,读几次就调用几次无论要用的数据是否发生变化
* @returns {string}
*/
get(){
//此时get函数中的this指向是vm
console.log('get调用了', this);
return this.firstName + '--' + this.lastName
},
/**
* set什么时候调用
* 1.当fullName被修改时
* @param value
*/
set(value){
//修改计算属性所依赖的普通属性(放在data里面的)
//this === vm
const [ firstName, lastName ] = value.split('-');
this.firstName = firstName;
this.lastName = lastName; //依赖属性发生改变之后,计算属性自动改变
}
}
}
});
</script>
</body>
计算属性简写
<body>
<div id="root">
<!--v-model双向绑定-->
姓:<input type="text" v-model="firstName"/>
<br/><br/>
名:<input type="text" v-model="lastName"/>
<br/><br/>
测试:<input type="text" v-model="test"/>
<br/><br/>
全名: <span>{{ fullName }}</span>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
//data里的都是属性
firstName: '张',
lastName: '三',
test:'test'
},
//计算属性--> 旧属性加工
computed: {
//简写形式
//前提:计算属性只考虑读取不考虑修改 set丢了
//简写计算书写为一个函数(这个函数当成getter使用), 注意不要写箭头函数
//执行完getter之后,vm直接保存返回的数据为fullName属性的属性值,此时vm.fullName不是函数而是一个确切的计算值
fullName: function (){
return this.firstName + '--' + this.lastName;
}
}});
</script>
</body>
九.监视属性
1.监视属性
监视属性watch:
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在,才能进行监视!!
3.监视的两种写法:
(1).new Vue时传入watch配置
(2).通过vm.$watch监视
<body>
<div id="root">
<!--
监视属性watch:
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在,才能进行监视!!
3.监视的两种写法:
(1).new Vue时传入watch配置
(2).通过vm.$watch监视
-->
<h1>今天天气很 {{ info }}</h1>
<button @click="changeWeather">
切换
</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
data:{
isHot: true
},
//计算属性
computed: {
info(){
return this.isHot ? '炎热' : '凉爽';
}
},
//改变模版数据的方法
methods:{
changeWeather(){
this.isHot = !this.isHot;
}
},
// watch:{
// //监视的配置对象
// //watch不仅能监视data的普通属性,也可以检测计算属性
// isHot:{
// immediate: true, //当这个属性为true时,页面刚渲染就运行handler函数
// //handler 什么时候调用呢
// //当isHot发生改变就会调用该函数
// //handler接收两个参数,一个是这个状态参数改变前的值,另一个是改变后的旧值
// handler(newValue, preValue){
// console.log('ishot 被修改了');
// console.log(`newValue: ${newValue}, preValue: ${preValue}`);
// }
// }
// }
});
//watch的第二种写法,直接采用vm对象实例
vm.$watch('isHot', {
immediate: true, //当这个属性为true时,页面刚渲染就运行handler函数
//handler 什么时候调用呢
//当isHot发生改变就会调用该函数
//handler接收两个参数,一个是这个状态参数改变前的值,另一个是改变后的旧值
handler(newValue, preValue){
console.log('ishot 被修改了');
console.log(`newValue: ${newValue}, preValue: ${preValue}`);
}
});
</script>
</body>
2.深度监视
深度监视:
(1).Vue中的watch默认不监测对象内部值的改变(一层)。
(2).配置deep:true可以监测对象内部值改变(多层)。
备注:
(1).Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以(想让它可以则配置deep:true)!
(2).使用watch时根据数据的具体结构,决定是否采用深度监视。
<body>
<div id="root">
<h1>今天天气很 {{ info }}</h1>
<button @click="changeWeather">
切换
</button>
<hr/>
<h3>a的值是:{{ numbers.a }}</h3>
<button @click="numbers.a++">
点我让a加一
</button>
<h3>b的值是:{{ numbers.b }}</h3>
<button @click="numbers.b++">
点我让b加一
</button>
<h1>
测试vue自身监测数据属性
{{ numbers.d.e }}
</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
data:{
isHot: true,
numbers:{
a:1,
b:1,
d:{
e:2
}
}
},
//计算属性
computed: {
info(){
return this.isHot ? '炎热' : '凉爽';
}
},
//改变模版数据的方法
methods:{
changeWeather(){
this.isHot = !this.isHot;
}
},
watch:{
//监视的配置对象
//watch不仅能监视data的普通属性,也可以检测计算属性
isHot:{
//immediate: true, //当这个属性为true时,页面刚渲染就运行handler函数
//handler 什么时候调用呢
//当isHot发生改变就会调用该函数
//handler接收两个参数,一个是这个状态参数改变前的值,另一个是改变后的旧值
handler(newValue, preValue){
console.log('ishot 被修改了');
console.log(`newValue: ${newValue}, preValue: ${preValue}`);
}
},
//监测多级结构里面的属性 深度监视
// 'numbers.a':{
// handler(){
// console.log('a发生改变了')
// }
// }
//深度监视numbers中的所有属性
numbers:{
deep: true, //监视多级结构的属性
handler(){
console.log('numbers 发生改变')
}
}
}
});
</script>
</body>
3.监视的简写形式
body>
<div id="root">
<h1>今天天气很 {{ info }}</h1>
<button @click="changeWeather">
切换
</button>
<hr/>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
data:{
isHot: true,
},
//计算属性
computed: {
info(){
return this.isHot ? '炎热' : '凉爽';
}
},
//改变模版数据的方法
methods:{
changeWeather(){
this.isHot = !this.isHot;
}
},
// watch:{
// //监视的配置对象
// //watch不仅能监视data的普通属性,也可以检测计算属性
// // isHot:{
// // //immediate: true, //当这个属性为true时,页面刚渲染就运行handler函数
// // //handler 什么时候调用呢
// // //当isHot发生改变就会调用该函数
// // //handler接收两个参数,一个是这个状态参数改变前的值,另一个是改变后的旧值
// // //deep: true //简写
// // handler(newValue, preValue){
// // console.log('ishot 被修改了');
// // console.log(`newValue: ${newValue}, preValue: ${preValue}`);
// // }
// // }
// //简写:
// //简写的前提watch的属性不需要immediate和deep属性的时候
// // isHot(newValue, preValue){
// // console.log(newValue,preValue);
// // }
// }
});
//完整写法
// vm.$watch('isHot', {
// deep: true,
// immediate: true,
// handler(newValue, preValue){
// console.log(newValue, preValue);
// }
// });
//简写 (代价就是不能配置其他配置项deep immediate)
vm.$watch('isHot', function (newValue, preValue){
//this === vm
console.log(newValue, preValue);
})
</script>
</body>
4.computed和watch的区别
computed和watch之间的区别:
1.computed能完成的功能,watch都可以完成。
2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。
两个重要的小原则:
1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,
这样this的指向才是vm 或 组件实例对象。
<body>
<div id="root">
姓:<input type="text" v-model="firstName"/>
<br/><br/>
名:<input type="text" v-model="lastName"/>
<br/><br/>
测试:<input type="text" v-model="test"/>
<br/><br/>
全名: <span>{{ fullName }}</span>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
//data里的都是属性
firstName: '张',
lastName: '三',
fullName:'张-三',
test:'test'
},
watch:{
//这里不需要深度监视则简写 监视firstname lastname
//计算属性不能开启异步操作更新
firstName(newF){
//this === vm
setTimeout(() => {
//继承外部作用域的this//注意此时的函数写成箭头函数(因为它并不是由vue来调用的)
//如果写成function(){}的形式 this === window,则无法更新watch属性
//异步
this.fullName = newF + '-' + this.lastName;
}, 1000);
},
lastName(newL){
this.fullName = this.firstName + '-' + newL;
}
}
});
</script>
</body>