1.windows下搭建vue开发环境
1)安装node8 node -v npm -v 测试是否安装成功
2)安装vue-cli@2.9.6 npm install vue-cli@2.9.6 --global vue --version 测试vue是否安装成功
npm install -g cnpm --registry=https://registry.npm.taobao.org npm不能用时,还可以安装cnpm
至此环境搭建成功,创建vue项目
1)初始化项目 vue init webpack app01
2)安装依赖 cd app01 npm install
3)测试 npm run dev
1.代码转换以及打包 2.启动静态服务器webpack-server 3.部署,将打包的代码部署到webpack-server上
4)进行访问 localhost:8080
2.vue文件
(.vue无法在浏览器上直接执行,vue-loader的作用就是将.vue转换为.html,.css,.js,然后通过webpack打包再在浏览器上运行)
每个.vue文件都是一个vue组件(模块)vue文件组成
1.模板 (html) <template> 有且只有一个根标签div</template>
2.js使用模块化编程,为了使别的模块可以调用,要通过export导出Vue构造函数参数,用于 new Vue()
3.css
3.vue的原理
js引用了mvvm思想的轻量级框架,与angularJS,React并称为前端三大框架,数据驱动。vue机制,数据渲染(能自动将值部署到页面)
mvvm :m model数据模型 v view 视图 html template vm viewmodel
Mvc,Mvp以及mvvp都是最常见的软件架构。
MVC分为视图层,控制器,模型:view传送指令到controller,Controller 完成业务逻辑后,要求 Model 改变状态,Model 将新的数据发送到 View,用户得到反馈
mvp模式将 Controller 改名为Presenter,同时改变了通信方向,各部分的通信都是双向的,View 与 Model 不发生联系,都通过 Presenter 传递。View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。
MVVM模式将 Presenter 改名为 ViewModel,基本上与 MVP 模式完全一致。
唯一的区别是,它采用双向绑定:View的变动,自动反映在 ViewModel
4.vue数据的简单绑定
1)使用{{}}直接在模板中输入值
data(){
return {
msg:'',
arr:[{
name:'terry'
},{
name:'larry'
}],
user:{}
}
}
<h2>{{msg}}</h2>
2) 循环渲染
<ul>
<li v-for="a in arr">
{{a.name}}
</li>
</ul>
3) 双向数据绑定
一般用于表单
<input type="text" v-model="name">
4) 条件渲染
1) 简单绑定
{{msg}}
2) 表达式绑定
data:{
user:{
name:'terry',
age:12,
gender:'male'
}
}
性别:{{ user.gender=='male'?'男':'女' }}
年龄:{{ user.age+1 }}
3) html绑定
data:{
a:"<h2>hello</h2>"
}
<div v-html='a'></div>
=>
a中h2标签才会被浏览器解析
4) 属性绑定
data:{
b:'this is b'
}
<div v-bind:title='b'>one</div>
5) 事件绑定
methods:{
foo(){
}
}
<div v-on:click='foo'>one</div>
6) 指令简写
v-bind:title
=>
:title
v-on:click
=>
@click
5.vue实例的生命周期
new Vue({
data:{
msg:'hello',
users:[]
},
create(){
this.users = data;
}
methods:{
foo(){
}
}
})
<h2>{{msg}}</h2>
1. vue实例对象创建 (model)
beforeCreate(创建前)
Vue实例对象没有完全创建,还不能访问data,methods
created(创建后)
Vue实例对象完全创建,可以直接访问data,methos
2. 初次挂载 (view)
beforeMount 模块加载完成 (载入前)
mounted 数据才得到渲染 (载入后)
3. 数据监听
当data中值发生改变,模块会跟着改变(只有在发生改变的时候才会触发)
beforeUpdate 更新前
updated 更新后
4. 销毁
beforeDestroy 销毁前
destroyed 销毁后