认识vue

1.渐进式 JavaScript 框架

2.作者: 尤雨溪(一位华裔前 Google 工程师)

3.作用: 动态构建用户界面

特点

1.遵循 MVVM 模式

2.编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

3.它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库开发项目

 与其它前端 JS 框架的关联

1.借鉴 angular 的模板和数据绑定技术

2.借鉴 react 的组件化和虚拟 DOM 技术

扩展插件

1.vue-cli: vue 脚手架

2.vue-resource(axios): ajax 请求

3.vue-router: 路由

4.vuex: 状态管理

5.vue-lazyload: 图片懒加载

6.vue-scroller: 页面滑动相关

7.mint-ui: 基于 vue 的 UI 组件库(移动端)

8.element-ui: 基于 vue 的 UI 组件库(PC 端)

9.它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库开发项目

Vue 的基本使用

 编码

<div id="app">

<input  type="text"  v-model="username">

<p>Hello,  {{username}}</p>

</div>

<script  type="text/javascript"  src="../js/vue.js"></script>

<script  type="text/javascript">

new  Vue({

el:  '#app',

data:  {

username:  'vue'

}

})

</script>

作业

我姓{{user}},名{{name}},全名{{username}}

export default {

name: 'HelloWorld',

data () {

return {

user: '张',

name: '超',

msg: 'Welcome to Your Vue.js App'

}

},

computed: {

username: function () {

return this.user + this.name

}

}

}