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() }}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。