3-04 2,420 views
课程观看地址：https://www.imooc.com/video/18551
1.课程环境
NVM 下载地址：https://github.com/creationix/nvm
安装 NPM , NODEJS ，NVM （nodejs版本管理工具）
安装 NPM , NODEJS ，NVM （nodejs版本管理工具）
切换淘宝NPM镜像 npm install -g cnpm –registry=https://registry.npm.taobao.org
chrome 安装 Vue调试工具 “Vue.js devtools”
Vue工程化工具 ： npm i -g vue-cli
计算属性：computed ，使用场景 数据联动，可侦听多个变量或数组
侦听器：watch ，使用场景，异步场景，一般侦听一个变量或数组
侦听器：watch ，使用场景，异步场景，一般侦听一个变量或数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test vue2</title>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<p>
{{msg1}}
</p>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data:{
msg:'hello vue',
another:'another hello vue!'
},
watch:{
msg:function (newval,oldval) {
console.log('newval is:'+newval)
console.log('oldval is:'+oldval)
}
},
computed:{
msg1:function(){
return 'computed:' + this.msg + ',' + this.another
}
}
})
</script>
</html>
* 条件渲染
v-if,v-else,v-else-if,v-show
v-if,v-else,v-else-if,v-show
* 列表渲染
* class与style绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test vue3</title>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>
</head>
<body>
<div id="app1">
<div v-if="count > 0">
count大于0，count={{count}}
</div>
<div v-else-if="count < 0">
count小于0，count={{count}}
</div>
<div v-else>
count={{count}}
</div>
<div v-show="count == -1">show:{{count}}</div>
</div>
<div id="app2">
{{msg}}
<ul>
<li v-for="item in list">
<span :style="styleMsg" :class="{'active':true}">
{{item.name}}
</span>
<span :class="['active','add','more',{'another':true},{'other':item.age==24}]">
{{item.age}}
</span>
</li>
</ul>
</div>
</body>
<script>
var app2 = new Vue({
el: "#app2",
data:{
'msg':'v-for',
'styleMsg':{
color:'red',
},
'list':[
{name:'xiaoli',age:25},
{name:'xiaowu',age:24},
]
}
})
var app1 = new Vue({
el: "#app1",
data:{
msg:'hello vue',
another:'another hello vue!',
count:0
},
})
</script>
</html>
* vue-cli
– 快速创建工程的两种方法
– 工程化项目的目录
安装vue-cli ： npm install -g @vue/cli
创建项目:vue create app_name
启动项目：npm run serve
– 快速创建工程的两种方法
– 工程化项目的目录
安装vue-cli ： npm install -g @vue/cli
创建项目:vue create app_name
启动项目：npm run serve
* 图形化创建项目
vue ui
components——组件
public——资源目录
views——视图目录
.package.json 包含依赖，serve bulid 等等命令
* 组件化思想
–300行原则，尽量把代码控制在300行以内
–复用原则
–业务复杂性原则
–300行原则，尽量把代码控制在300行以内
–复用原则
–业务复杂性原则
组件化带来的问题
–组件状态管理（vuex）
–多组件的混合使用，多页面，复杂业务（vue-router）
–组件间的传参、消息、事件管理（props、emit/on，bus）
* 高执行效率
* 开发单页面复杂应用
风格之南
* 好习惯 少走坑
* 写出自己看得懂的代码
* 写出别人看得懂的代码
参考：https://cn.vuejs.org/v2/style-guide/
Vue-router 路由
Vuex -> 状态管理模式
Actions -> state -> view 循环
* 多个视图依赖同一状态（菜单导航）
* 来自不同视图的行为需要变更同一状态（评论弹幕）
* 为vuejs 开发的状态管理模式
* 组件状态集中管理
* 组件状态改变遵循统一的原则
Actions -> state -> view 循环
* 多个视图依赖同一状态（菜单导航）
* 来自不同视图的行为需要变更同一状态（评论弹幕）
* 为vuejs 开发的状态管理模式
* 组件状态集中管理
* 组件状态改变遵循统一的原则
//@表示src目录
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {//组件状态管理
},
mutations: {//改变vue状态的方法集
},
actions: {
}
})
调试方法
1.console.log()
2.console.error()
3.alert()
4.debugger
5.chrome vue调试插件
6.vue 实例，window对象绑定
如何集承vue
-集成场景
–单页面，多页面引用vue 直接cdn引用
–复杂单页面应用 vue cli 工具
-集成场景
–单页面，多页面引用vue 直接cdn引用
–复杂单页面应用 vue cli 工具
开发工作流
-需求调研（确定需求）
-交互设计、逻辑设计、接口设计
-代码实现、测试运行、线上部署
