初学:从官网引入vue.js,或者用cdn引入https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js即可开始我们的学习之路。
1.第一步去创建一个实例,并且让我们的vue实例去挂载到这个容器上边
示例:<div id="root"></div> var vm = new Vue({ // 指定一个容器 el: '#root', //当前已经进行了挂载了 )}
如果存在俩个容器的情况,第一个容器解析完之后,第二个将不会再去解析。一个容器只可以被一个new Vue实例接管。存在俩个vue实例的话,按照js单线程顺序,只会第一个接管。(只能存在一对一,不能存在多对多)
2.简单的v-model数据绑定,以及插值语法
<!-- 准备一个容器 --> <div id="qwer"> <!-- 通过v-text指令将数据渲染到页面 --> <h1 v-text="msg"></h1> <!-- 通过v-html指令将数据渲染到页面 --> <h1 v-html="msg"></h1> <!-- 通过v-bind指令将数据渲染到页面 --> <!-- v-bind既是插值语法,也可简写: --> <h1 v-bind:title="msg"></h1> <!-- 简便写法 --> <h1 :title="msg"></h1> <!-- 通过v-on指令将数据渲染到页面 --> <h1 v-on:click="showMsg">点击我</h1> <!-- 通过v-model指令将数据渲染到页面 --> <input type="text" v-model="msg"> <h1>{{msg}}</h1> //这里用双括号就是v-model的原理 //数据绑定 </div> <script> var vm = new Vue({ el: '#qwer', // 指定数据 data: { msg: 'hello world' }, // 指定方法 methods: { showMsg() { alert(this.msg) } } }) </script>
Vue模板中的语法有2大类
1.插值语法
功能:用于解析标签的内容
写法 {{xxx}},xxx是js的表达式,可以直接读取到data中的所有属性
2.指令语法
功能:用于解析标签(包括标签属性,标签体内容,绑定事件等等)
举例:v-bind:src="xxx",简写为 :src="xxx",同理xxx也要写js表达式
可以直接读取到data中的所有属性。
Vue中有2种数据绑定的方法:
1.单向绑定(v-bind):数据只可以从data中流向页面。
2.双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。
3.mvvm
m(model):是表示data中的值
v(view):视图容器
vm(viewModel):连接他们俩个的桥梁
数据发生变化,视图也要跟着变化。因为vm帮我做了很多繁重的事情
可以用vm去接收我这个vue实例对象
4.何为数据代理
<script> // 通过一个对象代理另一个对象中得属性的操作 读和写 let obj = { a:100 } let obj1 = { b:500 } //用原型去让obj1去代理obj的a Object.defineProperty(obj1,"a",{ get(){ return obj.a }, set(val){ obj.a = val } }) </script>
5.Vue中的数据代理
1.Vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处:
更加方便了操作data中的数据
3.基本原理:
通过Objet.defineProperty()把data中的对象中所有的属性加到vm上
为每一个添加到vm的属性,都指定一个getter/setter
在getter/setter内部去操作(读/写)data中对应的属性
4.在log里边的vm(_data)是数据劫持,为了方便修改data中的数据采取做的接触
6.事件的基本使用
<div id="root"> <!-- vue中的点击事件 --> <button v-on:click="showInfo">点我会有提示信息</button> <!-- 简写@click --> <button @click="showInfo">点我会有提示信息111</button> <!-- 传参数进来 --> <button @click="showInfochuancan(8520)">点我会有提示信息</button> </div> <script> new Vue({ el: "#root", //因为咱们这个方法是用vue实例来提供的,必须要用methods这个方法 methods: { showInfo() { alert('Hi there') }, showInfochuancan(number) { console.log(number); } }, }) </script>
事件的基本使用:
1.使用v-on:xxx 或者@xxx来绑定事件,其次xxx是事件名字。
2.事件的回调需要配置在methods对象中,最终会在vm上。
3.methods中配置的函数,不要再使用箭头函数,不然this指向就不是vm了。会变成全局指向。
4.methods中配置的函数,都是被vue所管理的函数,this的指向是vm或者组件实例对象
7.事件修饰符
// Vue中的事件修饰符 // .stop 阻止冒泡 // .prevent 阻止默认事件 // .capture 添加事件侦听器时使用事件捕获模式 // .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 // .once 事件只触发一次 // .passive 事件的默认行为不会被阻止,并且可以在子类或方法调用链上进行优化。不过,在实现者在页面加载
8.键盘事件
1.vue中常用的按键别名:
回车=>enter
删除=>delete (捕获“删除”和“退格”键)
退出=> esc
换行=>tab
上=>up
下=>down
左=>left
右=>right
9.计算属性
计算属性 1.定义:要用的属性不存在,要通过已有属性计算得来 2.原理:底层借助了Object.defineProperty()方法提供的getter和setter方法 3.get函数什么时候调用? 1.初次读取时会执行一次 2.当依赖的数据发生变化时,会再次执行 3.优势:与methode实现相比,内部有缓存机制(复用),效率更高,调试方便
<body> <div id="root"> 姓:<input type="text" v-model:value="firstName"> <br/><br/> 名:<input type="text" v-model:value="lastName"> <br/><br/> 全称 <span>{{fullname}}</span> </div> <script> new Vue({ el: "#root", data() { //在vue中data里边的就是属性,前边是属性名字,后边是属性值 return { firstName: '张', lastName: '三' } }, //把他们俩个需要合并这一步操作,就是计算属性 computed:{ //需要一个完整计算的方法 fullname:{ //get有什么作用,当有人读取fullname这个属性的时候,就会自动调用get方法,并且把他的值作为fullname的返回值 //get什么时候会调用? //1.初次读取fullname //2.所依赖的数据发生变化时 get(){ return this.firstName+ "+" + this.lastName } } //简写形式,直接把fullname作为一个参数回调出去。在计算属性之中 fullname(){ return this.firstName+ "+" + this.lastName } }, }) </script> </body>
10.监视属性
监视属性watch:
1.当被监视的属性变化时,回调函数自动调用,并且进行相关的操作
2.监视的属性必须存在,才能进行监视
3.监视的俩种写法
(1)new Vue时传入watch配置
(2)通过vm.$watch进行监视
watch:{ //想要监视谁 监视ishot ishot:{ //handler什么时候调用呢?当ishot发生改变的时候调用 //handler里边有俩个值,一个新值,一个旧值 handler(newValue,oldValue){ console.log("ishot被改变",newValue,oldValue); } }, //不止可以监听设置的属性,也可以监听其他的属性 //这个是计算属性的属性 info(newValue,oldValue){ console.log(newValue,oldValue); } },
//要拿变量来接收vue才可以用vm vm.$watch('ishot',{ handler(newValue,oldValue){ console.log(newValue,oldValue); } })
11.深度监听
data中存在一个这样的
问题:要如何监听到a呢?
data() { //在vue中data里边的就是属性,前边是属性名字,后边是属性值 return { NUmbers:{ a:1, b:2 } }
答:
watch:{ //监听多级结构中的某个属性 "NUmbers.a":{ handler(newValue,oldValue){ console.log(newValue,oldValue); console.log("a被改变了"); } }, }
问:如何拿到NUmbers.b的改变呢?
//监听多级结构中的每一个属性 //配置deep:true可以检测对象内布值改变 NUmbers:{ deep:true, handler(newValue,oldValue){ console.log(newValue,oldValue); console.log(""); } },
vue中的wacth默认不监听对象内部的纸改变(一层)
配置deep:true可以检测对象内布值改变
理解:监听器执行到他该走的一步时候
我们就可以在handler里边写判断
11.监听简写
//监视属性 watch:{ ishot(newValue,oldValue){ console.log("ishot被改变",newValue,oldValue); }, } //用vm身上的实例也可以到监听的效果 vm.$watch('ishot',{ handler(newValue,oldValue){ console.log(newValue,oldValue); } })