vue介绍 ~ 之官网 (这个需要整合对应的vue基础等重叠内容)

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架

(1)Vue 采用自底向上增量开发的设计 ; 何为:自底向上???
Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。
(2)Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
https://github.com/vuejs/awesome-vue#libraries--plugins vue 生态系统支持的库
http://cn.vuejs.org/v2/guide/single-file-components.html 单文件(vue教程主页)

Vue.js 的目标:通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.
实现了view+model的绑定
[和其他框架的对比](http://cn.vuejs.org/v2/guide/comparison.html vue)

引入vue.js

vue 学习的前提知识:html+css + javascript
安装可以参考:
http://www.jianshu.com/p/eda22fa7b12a
http://www.jianshu.com/p/82eaeda8adcf

PS: 不推荐新手直接使用 vue-cli,尤其是对 Node.js 构建工具不够了解的同学。
那么新手应该是怎么创建呢???

1、 声明式渲染
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统:
(也就是:通过模板将数据渲染到html的dom系统中)


vue介绍 ~ 之官网 (这个需要整合对应的vue基础等重叠内容)_第1张图片
将下面的app渲染到上面的id="app"中

上面看起来单单渲染一个字符串模板非常类似,但是vue.js 在背后做了大量工作。
这样,数据和dom已经被绑定在一起,所有的元素都是响应式的。
(过浏览器打开,修改app.message)

vue介绍 ~ 之官网 (这个需要整合对应的vue基础等重叠内容)_第2张图片
官网解释修改,还是没有修改成功

除了绑定插入的文本内容,我们还可以采用这样的方式绑定 DOM 元素属性:


vue介绍 ~ 之官网 (这个需要整合对应的vue基础等重叠内容)_第3张图片
VM绑定数据

这里的 v-bind 属性被称为 “指令”;
指令带有前缀 v- ,表示它们是Vue.js提供的特殊属性;它们会在渲染过得dom上应用特殊的相应行为。简单含义是:将这个元素节点的title属性和Vue实例的message属性绑定到一起。
***打开浏览器的控制台输入 app2.message = 'some new message',你就会再一次看到这个绑定了title属性的HTML已经进行了更新。
这个没有实验到。/(ㄒoㄒ)/~~

vue介绍 ~ 之官网 (这个需要整合对应的vue基础等重叠内容)_第4张图片
里面的div两个同时并列会出现错误

vue介绍 ~ 之官网 (这个需要整合对应的vue基础等重叠内容)_第5张图片
显示结果,所以只能够有一个div开头

&&&####
数据绑定没有成功;需要进一步进行研究/(ㄒoㄒ)/~~

你可能感兴趣的:(vue介绍 ~ 之官网 (这个需要整合对应的vue基础等重叠内容))