3.Vue介绍及其基本使用

目录

---

Vue专栏目录（点击进入…）

---

---

Vue介绍及其基本使用（渐进式框架）

Vue介绍

Vue（读音/vju:/，类似于view）是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动
官方地址： https://cn.vuejs.org
下载地址： https://cn.vuejs.org/v2/guide/installation.html

Vue基本使用

（1）Vue引入方式

使用Vue有提供很多选择（webpack/vue-cli）
注意：但是不建议初学者以开始vue-cli，特别是还不熟悉基于Node.js的构建工具

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 下载后引入vue.js：开发或测试版本 -->
<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>

（2）html代码

<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>

<div id="oneVue">{{vueData}} me too!</div>

<script type="text/javascript">
	const oneVue = new Vue({
		el : "#oneVue",
		data : {
			vueData : 'first study vue！'
		}
	});
</script>

（3）Vue反应性（控制台改变绑定值，即可改变页面效果）

总结：在JavaScript控制台设置oneVue.vueData绑定值，可立即改变页面效果

Vue的所有内容现在都是反应性的，当数据和DOM已链接。打开浏览器的JavaScript控制台（现在在此页面上），并将其设置oneVue.vueData为其他值。可以看到上面呈现的示例已相应更新

模板语法

Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。

在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把DOM操作次数减到最少。

如果熟悉虚拟DOM并且偏爱JavaScript的原始力量，也可以不用模板，直接写渲染（render）函数，使用可选的JSX语法。

插值

（1）文本：{{…}}

双向绑定插值（{{ … }}）
数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值：
Message: {{ msg }}

Mustache标签将会被替代为对应数据对象上msg property的值。无论何时，绑定的数据对象上msg property发生了改变，插值处的内容都会更新。

一次性插值（{{ … }} + v-once）
通过使用v-once指令，也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

<span v-once>这个将不会改变: {{ msg }}</span>

（2）原始HTML：v-html

双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，需要使用v-html指令

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

这个span的内容将会被替换成为property值rawHtml，直接作为HTML——会忽略解析property 值中的数据绑定。注意：不能使用v-html来复合局部模板，因为Vue不是基于字符串的模板引擎。反之，对于用户界面（UI），组件更适合作为可重用和可组合的基本单位。

在站点上动态渲染的任意HTML可能会非常危险，因为它很容易导致XSS攻击。请只对可信内容使用HTML插值，绝不要对用户提供的内容使用插值

（3）Attribute绑定标签属性：v-bind:标签属性

Mustache语法不能作用在HTML attribute上，遇到这种情况应该使用v-bind指令

<div v-bind:id="dynamicId"></div>

对于布尔attribute（它们只要存在就意味着值为true），v-bind工作起来略有不同，在这个例子中：

<button v-bind:disabled="isButtonDisabled">Button</button >

如果isButtonDisabled的值是null、undefined或false，则disabled attribute甚至不会被包含在渲染出来的元素中

（4）JavaScript表达式（单个）

迄今为止，在模板中一直都只绑定简单的property键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的JavaScript表达式支持

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

这些表达式会在所属Vue实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如Math和Date。不应该在模板表达式中试图访问用户定义的全局变量。