搭建开发与调试环境

搭建开发与调试环境

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：Python 机器学习入门之pandas的使用

熟悉Vue.js的语法
Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑
定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML，所以能
被遵循规范的浏览器和HTML解析器解析。在底层的实现上，Vue将模板
编译成虚拟DOM渲染函数。结合响应系统，Vue能够智能地计算出最少
需要重新渲染的组件数量，并把DOM操作次数减到最少。本章将讲解
Vue.js语法中数据绑定的语法和指令的使用。
4.1 创建应用程序实例
在一个使用Vue.js框架的页面应用程序中，最终都会创建一个应
用程序的实例对象并挂载到指定DOM上。这个实例将提供应用程序上下
文，应用程序实例装载的整个组件树将共享相同上下文。
在Vue 3.0中，应用程序的实例创建语法规则如下：
Vue.createAPP(App)
应用程序的实例充当了MVVM模式中的ViewModel。createAPP()是
一个全局API，它接受一个根组件选项对象作为参数，该对象可以包含
数据、方法、组件生命周期钩子等，然后返回应用程序实例本身。Vue
3.0引入createAPP()是为了解决Vue 2.x全局配置代理的一些问题。
创建了应用程序的实例后，可以调用实例的mount()方法，制定一
个DOM元素，在该DOM元素上装载应用程序的根组件，这样这个DOM元素
中的所有数据变化都会被Vue框架所监控，从而实现数据的双向绑定。
Vue.createAPP(App).mount(‘#app’)
在组件选项对象中会有一个data()函数，Vue在创建组件实例时会
调用该函数。data()函数返回一个数据对象，Vue会将这个对象包装到
它的响应式系统中，即转化为一个代理对象，此代理使Vue能够在访问
或修改属性时执行依赖项跟踪和改进通知，从而自动渲染DOM。数据对
象的每一个属性都会被视为一个依赖项。
注意
这里创建Vue实例后赋值给了变量vm，在实际开发中并不要求一定
要将Vue实例赋值给某个变量。
在浏览器中运行程序4.1.html，结果如图4-1所示。

插值
应用程序实例创建完成后，就需要通过插值进行数据绑定。插值
的方式有以下3种。
1．文本插值
数据绑定最常见的形式就是使用Mustache语法（双大括号）的文
本插值：
span>Message:{ { message}}
Mustache标签将会被替代为对应数据对象上message属性的值。无
论何时，绑定的数据对象上message属性发生了改变，插值处的内容都
会更新。
通过使用v-once指令，也能执行一次性地插值，当数据改变时，
插值处的内容不会更新。但这会影响到该节点上的其他数据绑定：
这个将不会改变:{ {message}}
在浏览器中运行程序4.1.html，按F12键打开控制台并切换到
“Elements”选项，可以查看渲染的结果，如图4-2所示。
2．原始HTML
Mustache语法会将数据解释为普通文本，而非HTML代码。为了输
出真正的HTML，需要使用v-html指令。
注意
不能使用v-html来复合局部模板，因为Vue不是基于字符串的模板
引擎。反之，对于用户界面（UI），组件更适合作为可重用和可组
合的基本单位。
例如，想要输出一个a标签，首先需要在data属性中定义该标签，
然后根据需要定义href属性值和标签内容，最后使用v-html绑定到对
应的元素上。
【例4.2】输出真正的HTML（源代码\ch04\4.2.html）。
在浏览器中运行程序，按F12键打开控制台并切换到“Elements”
选项，可以发现使用v-html指令的p标签输出了真正的a标签，当单击
“百度”后，页面将跳转到对应的页面，效果如图4-3所示。
从结果可知，Mustache语法不能作用在HTML特性上，如果需要控
制某个元素的属性，可以使用v-bind指令。
注意
站点上动态渲染的任意HTML可能会非常危险，因为它很容易导致
XSS攻击。请只对可信内容使用HTML插值，绝不要对用户提供的内
容使用插值。

使用JavaScript表达式
在模板中，一直都只绑定简单的属性键值。但实际上，对于所有
的数据绑定，Vue.js都提供了完全的JavaScript表达式支持。
{ {number+1}}
{ {ok ?YES’:‘NO"}}
{ {message.split(’‘).reverse().join(’')}}

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

{ { var a= 1}}

{ { if (ok){return message}}
【例4.3】使用JavaScript表达式（源代码\ch04\4.3.html）。
在浏览器中运行程序，结果如图4-4所示。

方法选项
在Vue中，方法可以在实例的methods选项中定义。
使用方法