vuejs重要特征?
- 模板衬着
- 相应式双向数据绑定
- 组件化开辟
- 路由
假造DOM长处?
- 初始视图没有上风,反而中心多了一层假造DOM,所以机能没有进步
- 更新视图上风显著:削减反复天生与删除DOM操纵,削减查询定位DOM元素的操纵,能修正操纵完成的就毫不运用天生与删除来操纵
vue-cli 脚手架是什么?有什么作用?
- 是一种开辟vue运用的
前端自动化构建东西
- 重要有以下作用:
1、天生项目目次构造
2、当地开辟调试
3、代码布置
4、热加载
5、单元测试
Vue实体外部,怎样猎取和赋值(数据)
var app = new Vue({
el: '#app',
data: {
name: 'wt'
}
});
// 猎取数据
console.log(app.$data.name);
console.log(app.name);
// 赋值
app.$data.name = “你好”;
app.name = “你好”;
Vue实体内部,怎样猎取和赋值(数据)
var app = new Vue({
el: '#app',
data: {
name: 'wt',
message: ''
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
});
前提
前提
敕令有哪些?
v-if v-else v-else-if v-show
v-if/v-else/v-else-if : 能够运用<template> 初始开支低,少切换
v-show : 不能够运用<template> 切换开支低,初始频仍
列表
列表
敕令有哪些?
v-for
列表敕令作用于
数组
和
对象
MVVM vs MVP
MVVM:由M、V、VM三部份构成,vuejs重要完成VM部份,我们开辟重要担任M、V两层
MVP: 由M、V、P三部份构成,P担任营业逻辑和DOM操纵
MVVM长处:面向数据、代码少、效力高
MVP长处: 面向DOM、代码多、效力低
数据的双向绑定
- 单向绑定
把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新
- 双向绑定
假如用户更新了View,Model的数据也自动被更新了,这类状况就是双向绑定。
重要实用场景:
平常是表单元素(能与用户交互的那些)
- 双向绑定的完成
v-model
组件化
性命周期函数
Vue性命周期函数是一种
在某时候点
自动实行
的函数(钩子函数)
- 定义
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// 并不是定义在methods中
// 性命周期函数中,this指代vue实例
模板语法
- 标签内容
有3种语法:
1、插值表达式
<span>{{ msg }}</span>
2、v-text
<span v-text="msg"></span>
3、v-html
<span v-html="msg"></span>
注重:
v-text 与 {{}} 作用一样
3种语法都能够写js表达式:{{ msg + 'LEE'}} <span v-text="msg + 'LEE'"></span>
- 标签事宜(绑定)
<div id="app">
<button v-on:click="greet">Greet</button>
<!-- 简写 -->
<button @click="greet">Greet</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义要领
methods: {
greet: function (event) {
// `this` 在要领里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事宜
if (event) {
alert(event.target.tagName)
}
}
}
})
</script>
- 标签属性
有2个属性是特别的:class和style,其他属性(包含:class和style)都能够按以下绑定标签属性
<div id="app">
<div v-bind:id="box">Greet</div>
<!-- 简写 -->
<div :id="box">Greet</div>
<div :id="hasColor?'container':''">Greet</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
name: 'Vue.js',
box: 'container',
hasColor: true
},
// 在 `methods` 对象中定义要领
methods: {
greet: function (event) {
// `this` 在要领里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事宜
if (event) {
alert(event.target.tagName)
}
}
}
})
</script>
- 注重
1、无论是标签内容、事宜、属性都能够运用js表达式,与微信小顺序差别,vuejs能够直接挪用要领,比方 {{ greet() }}