1.1 vue的延迟挂载是什么?$mount是什么?
在vue中,有两种实例化的挂载方式,分别为el和$mount,这两种方式都为手动挂载,而在项目中,可用于延迟挂载(比如在挂载之前要做一些操作或者判断之类的),之后才进行手动挂载。new vue时,el和$mount并没有本质上的不同。
1.1.1 el
实例化:
javascript">new Vue({el: '#Demo',data: obj
})
模板:
javascript"><div id="Demo"><p>{{ text }}</p><!-- 这里的 `text` 不会更新的 --><button v-on:click="text = 'baz'">点击</button>
</div>
1.1.2 $mount
实例化:
javascript">const app = new Vue({xiaoming,18,...Demo
}).$mount('#Demo')
模板:
javascript"><div id="Demo"><h1 style="font-size: 16px; text-align: center;">{{ $t("message.hello") }}</h1>
</div>
1.2 data的写法分别是什么?
1.2.1 对象式
在vue(2.0)中,创建实例时,通常情况下data的配置都是按照一种固定的方式去写的,如下面的代码所示:
javascript">// 创建一个实例new Vue({el: "#Demo",data: {name: "小江同学"}})
除了上面的写法之外,data还有一种写法,另外这种写法在vue组件中使用比较频繁
data 的第二种写法也是通过配置项配置在 Vue 实例中的,但不同的是第一种写法是对象式写法,将 data 的值配置为一个对象。而第二种写法是函数式写法,将 data 定义成一个函数,在函数中返回一个对象,这种形式常用在组件中。
1.2.2 函数式
javascript">
<div id="Demo"><h1>Hello, {{ name }}</h1>
</div><script>vue.config.prodctionTip = false // 创建Vue实例new Vue({el: "#Demo",// data的第二种写法:函数式data() {return {name: "小江同学"}}})
</script>
需要注意的是:在函数式的写法中,一定要return出返回值。
1.3 什么是指令?
在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx的形式表示
在html中使用指令:
<div v-xxx ></div>
比如在angular中 以ng-xxx开头的就叫做指令
在vue中 以v-xxx开头的就叫做指令
指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值,框架会进行相关DOM操作的绑定
vue中常见的指令:
1.v-text 元素的InnerText属性,必须是双标签
2.v-if 判断是否插入这个元素
3.v-else-if
4.v-else
5.v-show 隐藏元素,如果确定要隐藏, 会给元素的style加上display:none
6.v-on 用于处理原生事件的, v-on:事件名="表达式||函数名" @事件名="表达式"
7.v-model vue的双向绑定流
8.v-bind 对属性的简单赋值,当内存中值改变,还是会触发重新渲染
9.v-for 对数据进行遍历 v-for="item in arr" 对象:v-for="item in obj" 使用时要加key
........还有很多,在后续更新中在写。
1.4 v-model 作用
就是给表单元素进行数据的双向数据绑定 。
1.5 双向绑定是什么与原理
双向绑定就是视图改变模型也很跟着改变,模型变视图也会改变。
Vue.js 的双向绑定是通过使用数据劫持和发布-订阅模式实现的。
具体实现原理如下:
-
Vue.js 会通过 Object.defineProperty() 方法将 data 对象的属性转换为 getter 和 setter。
-
当 data 中的属性被访问时,会触发 getter 方法,Vue.js 会将 Watcher 对象添加到订阅者列表中。
-
当 data 中的属性被修改时,会触发 setter 方法,setter 方法会通知订阅者列表中的 Watcher 对象,Watcher 对象会通知相关的视图进行更新。
-
当视图中的表单元素被修改时,会触发相应的事件,Vue.js 会通过 v-model 指令将修改后的值赋给 data 对象中的属性,从而实现双向绑定。
数据劫持:数据拦截 就是对data中的数据在初始化的时候监听起来(Object.defineProperty 来进行监听/代理) 当数据改变setter之后 vm就会知道 在视图改变getter 他就会通知模型你要修改了 模型改变了也会通知视图改变。
发布者订阅者模式:就是一个一对多的关系 发布者就是数据提供者 订阅者就是页面展示的 一个发布者可以对应无数个订阅者 但是发布者改变了 所有订阅者也会改变。
1.6 v-show是什么?
用来控制dom元素的显示或者隐藏 他的显示和隐藏是通过css的dispaly方式来控制的。
语法:v-show="布尔值" true显示 false隐藏。