vue.js入门教程、安装、实例化vue、模板语法

Vue教程

vue.js安装

1. 下载vue.js
   在vue.js官网下载vue.min.js,使用script标签src属性引入vue.min.js文件。
2. 使用CDN方法
   • https : //cdn.staticfile.org/vue/2.2.2/vue.min.js
   • https : //unpkg.com/vue/dist/vue.js
   • https : //cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
3. NPM方法
   在使用vue.js构建大型应用时推荐使用NPM安装

$ cnpm install vue
// 查看版本
$ npm -v


vue.js起步

每个 Vue 应用都需要通过实例化 Vue 来实现。

let vm&＃61;new Vue({el: ,data:{}//...
})el:表示DOM中的id 指定模板data:用于定义属性methods:用于定义函数&＃xff0c;可以通过return返回函数值。{{}}:用于输出对象属性和函数返回值&＃xff0c;模板渲染


实例

当一个 Vue 实例被创建时&＃xff0c;它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时&＃xff0c;html 视图将也会产生相应的变化。

vue.js模板语法

Vue.js 使用了基于 HTML 的模版语法&＃xff0c;允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统&＃xff0c;在应用状态改变时&＃xff0c; Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
插值

1. 插入文本
   数据绑定最常见的形式就是使用 {{xx}}形式的文本插值&＃xff1a;

2. 插入html
   使用 v-html 指令用于输出 html 代码&＃xff1a;

3. 插入属性
   HTML 属性中的值应使用 v-bind 指令。

如果color和size判断为true则使用他们的样式&＃xff0c;否则不使用该类的样式

4. 插入表达式
   Vue.js提供了完全的 Javascript 表达式支持。

5. 指令
   指令是带有 v- 前缀的特殊属性&＃xff0c;指令用于在表达式的值改变时&＃xff0c;将某些行为应用到 DOM 上。

如果flag为true则显示欢迎您&＃xff0c;为false则显示请登录。v-show同理&＃xff0c;具体差异可自行查阅

6. 参数
   参数在指令后以冒号指明。例如&＃xff0c; v-bind 指令被用来响应地更新 HTML 属性

7. 事件监听
   v-on 指令&＃xff0c;它用于监听 DOM 事件&＃xff0c;也可简写为&＃64;事件