一、基本介绍
- 使用方式
- 声明式渲染
- 条件与循环
- 处理用户输入
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
1.使用方式：创建一个 .html 文件，然后通过如下方式引入 Vue：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
//HTML
<div id="app">
{{ message }}
</div>
//JS
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。
v-bind：将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致
3.条件与循环
控制切换一个元素是否显示：
//HTML
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
//JS
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。
这个例子演示了我们不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果
还有其它很多指令，每个都有特殊的功能。例如，v-for指令可以绑定数组的数据来渲染一个项目列表：
//HTML
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
//JS
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
//OUTPUT
1.学习 JavaScript
2.学习 Vue
3.整个牛项目
在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。
4.处理用户输入
为了让用户和你的应用进行交互，我们可以用 v-on指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：
//HTML
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
//JS
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
Vue 还提供了v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
//HTML
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
//JS
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
二、如何创建一个Vue实例
Vue 函数
- 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。
- 当创建一个 Vue 实例时，你可以传入一个选项对象。
- 所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象。
数据与方法
- 当一个 Vue 实例被创建时，它将
data对象中的所有的属性加入到 Vue 的响应式系统中； - 当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
- 值得注意的是，只有当实例被创建时 data 中存在的属性才是响应式的。如果你在创建实例后才想起了要添加一个新的属性，那么对新属性的改动将不会触发任何视图的更新。如果需要的属性一开始为空或不存在，可以先给它设置一些初始值，比如：
data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}
-
Object.freeze()可以阻止响应系统追踪变化。 - Vue 实例暴露了一些有用的实例属性与方法，它们都有前缀
$，以便与用户定义的属性区分开来。
三、语法相关
- 插值
- 指令
- 缩写
插值
（1）文本：“Mustache”语法 (双大括号)
举例，<span>Message: {{ msg }}</span>
（2）原始HTML： v-html 指令
举例， <span v-html="rawHtml"></span>
Attention：在你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
（3）特性： v-bind 指令
举例，<div v-bind:id="dynamicId"></div>
（4）使用 JavaScript 表达式：对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式。
举例，
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
下面是不会生效的例子，
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。
指令
v-if
v-on
v-bind
缩写
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
网友评论