Vue入门（一）——基本概念
Vue入门（一）——基本概念
一、介绍
渐进式：由浅入深 响应式：及时更新
- 优点： 体积小，压缩后33K； 虚拟DOM，更高的运行效率； 双向数据绑定，不用操作DOM对象； 生态丰富，学习成本低。
HTML说明：
- JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言，不必在
<script>标签中使用type="text/javascript"。 - 通常的做法是把函数放入
<head>部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。 - 如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
二、基础
1. 创建Vue实例
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (#{dom-name}) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。
el: 挂载点
Vue会管理el选择命中的元素及内部的后代元素
CSS选择器：`#`对应id，`.`对应class，标签选择器也可以一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。
var vm = new Vue({
el: {}
data: {}
methods: {}
...
})2. 数据与方法
当一个 Vue 实例被创建时，它将如下 obj 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的 property。
除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。
<div id="app">{{ a }}</div>
<div id="app2">{{ b }}</div>
-------------------------------------------------
var obj = {
a: 'apple',
b: 'boy'
}
Object.freeze(obj)
var vm = new Vue({
el: '#app', // 对应id为app的标签
data: obj
})
var vm2 = new Vue({
el: '#app2', // 对应id为app的标签
data: obj
})
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})3. 生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数。
beforecreated、created、beforemounted、mounted、beforeupdated、updated等等。
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})4. 模板语法
（1）插值 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
<span>
Message: {{ msg }}
</span>
// 执行一次性地插值，当数据改变时，插值处的内容不会更新
<span v-once>
Message: {{ msg }}
</span>Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。
（2）原始 HTML
<p>
Using mustaches: {{ rawHtml }}
</p>
// 使用v-html指令，输出真正的HTML。这个 span 的内容将会被替换成为 property 值 rawHtml
<p>
Using v-html directive: <span v-html="rawHtml"></span>
</p>（3）HTML Attribute
<div v-bind:class="color" id="app">Test</div>
---------------------------------------------------
var vm = new Vue({
el: "#app",
data: {
color: 'red'
}
})
.red{color:red; font-size:100px;}（4）Javascript表达式 对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>（5）指令 指令 (Directives) 是带有 v- 前缀的特殊 attribute。当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
指令名称 | 作用 |
|---|---|
v-if | 条件渲染（惰性渲染，切换开销大），根据表达式真假来插入/移除标签，还有v-else, v-else-if |
v-show | 条件渲染（一定渲染，初始化开销大），根据条件展示/不展示标签，切换元素CSS property中的display |
v-bind | 响应式的更新HTML attribute |
v-on | 时间处理，监听DOM事件，并在触发时运行一些 JavaScript 代码（最好是在Vue()的methods中） |
v-for | 列表渲染，基于一个数组来渲染一个列表，使用 item in items (或(item, index) in items)形式的特殊语法 |
v-model | 在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素 |
- 参数 一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
<a v-bind:href="url">...</a>
<a v-on:click="doSomething">...</a>
// 动态参数，当data中attributeName的值为href时，同上
<a v-bind:[attributeName]="url">...</a>- 修饰符 修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
<form v-on:submit.prevent="onSubmit">...</form>- 缩写
// v-bind
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
// v-on
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>（6）代码演示
// v-if
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
// v-for
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
// v-on
// 1.存在事件修饰符：.stop/.prevent/.capture/.self/.once/.passive
// 例如: submit.prevent 提交事件不再重载页面
// 2.存在按键修饰符，监听键盘按键：.enter/.tab/.esc/...
<div id="example-1">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message)
}
}
})
// v-model
// 修饰符：.lazy 输入后不立刻修改/.number/.trim
<div id="demo2">
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>
<script>
new Vue({
el: '#demo2',
data: {
message: ''
}
})
</script>5. 侦听器
计算属性computed:是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
// 计算属性存在缓存
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})6. 组件基础
（1）基本示例
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script>
Vue.component('button-counter', {
// 一个组件的 data 必须是一个函数，每个实例可以维护一份被返回对象的独立的拷贝。否则会影响其他组件的值
data: function () {
// 若这里return一个前面定义好的val，则多个组件会同时更改值
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});
new Vue({
el: '#components-demo' ,
});
</script>（2） 组件注册
- 组件名规范 使用“kebab-case”的格式，小写字母加短横线分割。
- 全局注册 全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
Vue.component('my-component-name', {
// ... options ...
})- 局部注册
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
// 注意局部注册的组件在其子组件中不可用，需要在其中再定义components。
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})