Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
如果你已经是有经验的前端开发者,想知道 Vue 与其它库/框架有哪些区别,请查看对比其它框架。
以下代码是保存至一个index.html的文档(文件后缀名是.html)中,并非是.vue的文件,当今后学会了一些更vue复杂的应用的时候,比如CLI创建了更复杂的vue应用,并支持单文件组件,那在项目下创建的文件可能就是以.vue为后缀的文件。
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。
如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,直接写渲染 (render) 函数,使用可选的 JSX 语法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue模板语法插值文本插值(Mustache语法、双大括号包裹属性变量)</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<span>Message: {{ message }}</span>
<!--
Mustache 标签将会被替代为对应数据对象上 message property 的值。
无论何时,绑定的数据对象上 message property 发生了改变,插值处的内容都会更新。
-->
<!--
通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。
但请留心这会影响到该节点上的其它数据绑定:
-->>
<span v-once>这个将不会改变: {{ message }}</span>
</div>
<script type="text/javascript">
/*
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。
如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,直接写渲染 (render) 函数,使用可选的 JSX 语法。
*/
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
sitename: '编程之吧',
}
});
vm.message = '福星之吧'//重新给data属性message 赋值,有v-once 指令的标签中属性值将不会被改变,其值还是data 中message的值
</script>
</body>
</html>
转载注明:
感谢博主,喝杯咖啡~
感谢博主,喝杯咖啡~
还没有人发表评论