本帖最后由 长沙-就业部 于 2017-7-25 11:07 编辑
介绍 Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。 当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。
下图不仅概括了MVVM模式（Model-View-ViewModel），还描述了在Vue.js中ViewModel是如何和View以及Model进行交互的。 ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。 首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。 了解一门语言，或者学习一门新技术，编写Hello World示例是我们的必经之路。
这段代码在画面上输出"Hello World!"。 [JavaScript] 纯文本查看 复制代码 <div id="app">
<p>{{message}}</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello word'
}
})使用Vue的过程就是定义MVVM各个组成部分的过程的过程。 - 定义View
- 定义Model
- 创建一个Vue实例或"ViewModel"，它用于连接View和Model
在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。 在这个示例中，选项对象的el属性指向View，el: '#app'表示该Vue实例将挂载到<div id="app">...</div>这个元素；data属性指向Model，data: exampleData表示我们的Model是exampleData对象。 Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时{{ message }}会被数据对象的message属性替换，所以页面上会输出"Hello World!"。 通过上面的介绍，你应该对MVVM和VUE是如何实现MVVM模型有了大概认识。DOM Listeners和Data Bindings只是对实现的一个抽象描述。具体的实现方案和思路，感兴趣的同学可以以后通过阅读源码来深入的学习。
安装
兼容性
Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。
Vue.js 支持所有兼容 ECMAScript 5 的浏览器。
直接 <script> 引入直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。 重要提示：在开发时请用开发版本，遇到常见错误它会给出友好的警告。 开发环境不要用最小压缩版，不然就失去了错误提示和警告!
CDN推荐：https://unpkg.com/vue, 会保持和 npm 发布的最新的版本一致。可以在https://unpkg.com/vue/浏览 npm 包资源。 也可以从 jsDelivr 或 cdnjs 获取，不过这两个服务版本更新可能略滞后。 [JavaScript] 纯文本查看 复制代码 <script src="https://unpkg.com/vue"></script> NPM 在用 Vue.js 构建大型应用时推荐使用 NPM 安装， NPM 能很好地和诸如 Webpack 或Browserify 模块打包器配合使用。 Vue.js 也提供配套工具来开发单文件组件。 # 最新稳定版
$ npm install vue
常用指令
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。 上面这段话如果看不懂没关系，我们通过具体的指令和代码以及效果来理解它们。
Vue.js提供了一些常用的内置指令，同时我们也可以自己开发一些自定义的指令，后面的文章会介绍自定义指令。接下来我们先介绍以下几个内置指令：
v-model
MVVM模式本身是实现了双向绑定的，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。
修饰符： .lazy - 取代 input 监听 change 事件
.number - 输入字符串转为数字
.trim - 输入首尾空格过滤 |
示例代码： [JavaScript] 纯文本查看 复制代码 <div id="app-model">
<p>{{message}}</p>
<input type="text" v-model="message">[/color][/font][/align][align=left][font=微软雅黑][color=#b01600] <!-- 修饰符放在指令后面[/color][/font][/align][align=left][font=微软雅黑][color=#b01600] <input type="text" v-model.trim="message">[/color][/font][/align][align=left][font=微软雅黑][color=#b01600] -->[/color][/font][/align][align=left][font=微软雅黑][color=#b01600]</div>
var app_model = new Vue({
el:'#app-model',
data:{
message:''
}
})在输入框输入内容时，其上方同步显示输入内容： 将message绑定到文本框，当更改文本框的值时，<p>{{ message }}</p> 中的内容也会被更新。 反过来，如果改变message的值，文本框的值也会被更新，我们可以在Chrome控制台进行尝试。 v-if指令
v-if 是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下： v-if="expression" 注意：yes, no, age, name这4个变量都来源于Vue实例选项对象的data属性。 这段代码使用了4个表达式： - 数据的yes属性为true，所以"Yes!"会被输出；
- 数据的no属性为false，所以"No!"不会被输出；
- 运算式age >= 25返回true，所以"Age: 28"会被输出；
- 运算式name.indexOf('jack') >= 0返回false，所以"Name: keepfool"不会被输出。
注意：v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。 这一点可以从渲染的HTML源代码看出来，面上只渲染了3个<h1>元素，v-if值为false的<h1>元素没有渲染到HTML。 age是定义在选项对象的data属性中的，为什么Vue实例可以直接访问它呢？
这是因为每个Vue实例都会代理其选项对象里的data属性。
v-show指令
在Chrome控制台更改age属性，使得表达式age >= 25的值为false，可以看到<h1>Age: 24</h1>元素被设置了style="display:none"样式。 | 
收藏
淘帖
踩
