认识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
}
}
}
