File tree Expand file tree Collapse file tree 1 file changed +4
-4
lines changed Expand file tree Collapse file tree 1 file changed +4
-4
lines changed Original file line number Diff line number Diff line change 6
6
7
7
## Vue.js 是什么
8
8
9
- Vue.js(读音 /vjuː/, 类似于 ** view** ) 是一个构建用户界面的渐进式框架 。与其他单层框架( monolithic frameworks)不同的是,Vue 被设计成从底层向上可以被增量式的采用 。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用[ 单文件组件] ( single-file-components.html ) 和[ Vue生态系统支持的库] ( //github.com/vuejs/awesome-vue#libraries--plugins ) 开发的复杂单页应用。
9
+ Vue.js(读音 /vjuː/, 类似于 ** view** ) 是一套构建用户界面的 ** 先进框架 ** 。与其他单层框架( monolithic frameworks)不同的是,Vue 采用自底向上增量开发的设计 。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用[ 单文件组件] ( single-file-components.html ) 和[ Vue生态系统支持的库] ( //github.com/vuejs/awesome-vue#libraries--plugins ) 开发的复杂单页应用。
10
10
11
11
Vue.js 的目标是通过尽可能简单的 API 实现** 响应的数据绑定** 和** 组合的视图组件** 。
12
12
@@ -47,7 +47,7 @@ var app = new Vue({
47
47
</script >
48
48
{% endraw %}
49
49
50
- 我们已经生成了我们的第一个 Vue 应用!看起来这跟单单渲染一个字符串模板非常类似,但是 Vue.js 在背后做了大量工作。现在数据和 DOM 已经被绑定在一起,所有的元素都是** 响应式的** 。我们如何知道? 打开你的浏览器的控制台,并修改 ` app.message ` ,你将看到上例相应地更新。
50
+ 我们已经生成了我们的第一个 Vue 应用!看起来这跟单单渲染一个字符串模板非常类似,但是 Vue.js 在背后做了大量工作。现在数据和 DOM 已经被绑定在一起,所有的元素都是** 响应式的** 。我们如何知道? 打开你的浏览器的控制台,并修改 ` app.message ` ,你将看到上例相应地更新。
51
51
52
52
除了绑定插入的文本内容,我们还可以采用这样的方式绑定 DOM 元素属性:
53
53
@@ -80,7 +80,7 @@ var app2 = new Vue({
80
80
</script >
81
81
{% endraw %}
82
82
83
- 这里我们遇到新东西。你看到的 ` v-bind ` 特性被称为** 指令** 。指令带有前缀 ` v- ` ,以指示它们是 Vue.js 提供的特殊特性 。并且如你所想象的,它们会对绑定的目标元素添加响应式的特殊行为 。这个指令的简单含义是说:将该元素的 id 属性绑定到 Vue 实例的 id 属性上。
83
+ 这里我们遇到新东西。你看到的 ` v-bind ` 特性被称为** 指令** 。指令带有前缀 ` v- ` ,以指示它们是 Vue.js 提供的特殊属性 。并且如你所想象的,它们会在渲染过的 DOM 上应用特殊的响应式行为 。这个指令的简单含义是说:将该元素的 id 属性绑定到 Vue 实例的 id 属性上。
84
84
85
85
用浏览器的开发者工具去监测以上元素 - 你会发现这个元素的 id 为 ` inspect-me ` 。是的,如果你在控制台里更改 ` app2.id ` ,那么该元素的 id 也会随之更新。
86
86
@@ -314,7 +314,7 @@ var app7 = new Vue({
314
314
</script >
315
315
{% endraw %}
316
316
317
- 这只是一个人为的例子,但是我们已经将我们的应用分割成了两小的单元,子元素通过 ` props ` 接口实现了与父亲元素很好的解耦。我们现在可以在不影响到父亲应用的基础上 ,进一步为我们的 ` todo ` 组件改进更多复杂的模板和逻辑。
317
+ 这只是一个人为的例子,但是我们已经将我们的应用分割成了两小的单元,子元素通过 ` props ` 接口实现了与父亲元素很好的解耦。我们现在可以在不影响到父应用的基础上 ,进一步为我们的 ` todo ` 组件改进更多复杂的模板和逻辑。
318
318
319
319
在一个大型应用中,为了使得开发过程可控,有必要将应用整体分割成一个个的组件。在[ 后面的教程] ( /guide/components.html ) 中我们将详述组件,不过这里有一个(假想)的例子,看看使用了组件的应用模板是什么样的:
320
320
You can’t perform that action at this time.
0 commit comments