模板语法，条件渲染，列表渲染
vue-router vuex
vue-cli
用到的网站：
https://cn.vuejs.org/v2/guide/
https://cli.vuejs.org/zh/guide/
开发环境
1、IDE
webstorm http://www.jetbrains.com/webstorm
vscode https://code.visualstudio.com/
2、node环境
（1）nvm Node Version Manager
node 多版本管理工具
[1] 安装
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
vim ~/.bash_profile
或者全局配置在这个目录下
/etc/profile.d
# nvm配置
export NVM_DIR="$HOME/.nvm"[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
[2]使用
$ nvm --version # 0.34.0
nvm --help
nvm ls
nvm ls-remote
nvm install 8.0.0
nvm deactivate # 卸载时使用
$ node --version
v8.0.0
(2) cnpm淘宝镜像
$ npm install -g cnpm --registry=https://registry.npm.taobao.org</span></span></pre></div></div></div><p style="font-size:14px;color:rgb( 38 , 38 , 38 );line-height:1.74;letter-spacing:0.05em;outline-style:none;margin:0px">(3)chrome插件</p><p style="font-size:14px;color:rgb( 38 , 38 , 38 );line-height:1.74;letter-spacing:0.05em;outline-style:none;margin:0px">vue.js devtools</p><p style="font-size:14px;color:rgb( 38 , 38 , 38 );line-height:1.74;letter-spacing:0.05em;outline-style:none;margin:0px">chrome vue插件下载地址</p><p style="font-size:14px;color:rgb( 38 , 38 , 38 );line-height:1.74;letter-spacing:0.05em;outline-style:none;margin:0px"><a href="https://chrome-extension-downloader.com/" target="_blank" rel="noopener noreferrer">https://chrome-extension-downloader.com/</a></p><p style="font-size:14px;color:rgb( 38 , 38 , 38 );line-height:1.74;letter-spacing:0.05em;outline-style:none;margin:0px">(4)vue-cli</p><div class="lake-card-margin"><div class="lake-codeblock-content" style="border:1px solid rgb( 232 , 232 , 232 );max-width:750px;color:rgba( 0 , 0 , 0 , 0.65 );margin:0px;padding:0px;background:rgb( 249 , 249 , 249 )"><div class="CodeMirror-sizer" style="color:rgb( 89 , 89 , 89 );margin:0px;padding:16px;background:none 0% 0% / auto repeat scroll padding-box border-box rgba( 0 , 0 , 0 , 0 )"><pre class="cm-s-default" style="color:rgb( 89 , 89 , 89 );margin:0px;padding:0px;background:none 0% 0% / auto repeat scroll padding-box border-box rgba( 0 , 0 , 0 , 0 )"><span class="lake-preview-line" style="color:rgb( 89 , 89 , 89 );margin:0px;padding:0px;background:none 0% 0% / auto repeat scroll padding-box border-box rgba( 0 , 0 , 0 , 0 )"><span class="lake-preview-line-number lake-lm-pad-level-0" style="color:rgb( 191 , 191 , 191 );margin:0px 8px 0px 0px;padding:0px;background:none 0% 0% / auto repeat scroll padding-box border-box rgba( 0 , 0 , 0 , 0 )"></span><span class="lake-preview-codeblock-content" style="color:rgb( 89 , 89 , 89 );margin:0px;padding:0px;background:none 0% 0% / auto repeat scroll padding-box border-box rgba( 0 , 0 , 0 , 0 )">$ npm install -g @vue/cli # 全局安装
$ vue --version</span></span></pre></div></div></div><p style="font-size:14px;color:rgb( 38 , 38 , 38 );line-height:1.74;letter-spacing:0.05em;outline-style:none;margin:0px"><span style="color:rgb( 77 , 77 , 77 );font-size:16px" class="lake-fontsize-12">环境检查</span></p><div class="lake-card-margin"><div class="lake-codeblock-content" style="border:1px solid rgb( 232 , 232 , 232 );max-width:750px;color:rgba( 0 , 0 , 0 , 0.65 );margin:0px;padding:0px;background:rgb( 249 , 249 , 249 )"><div class="CodeMirror-sizer" style="color:rgb( 89 , 89 , 89 );margin:0px;padding:16px;background:none 0% 0% / auto repeat scroll padding-box border-box rgba( 0 , 0 , 0 , 0 )"><pre class="cm-s-default" style="color:rgb( 89 , 89 , 89 );margin:0px;padding:0px;background:none 0% 0% / auto repeat scroll padding-box border-box rgba( 0 , 0 , 0 , 0 )"><span class="lake-preview-line" style="color:rgb( 89 , 89 , 89 );margin:0px;padding:0px;background:none 0% 0% / auto repeat scroll padding-box border-box rgba( 0 , 0 , 0 , 0 )"><span class="lake-preview-line-number lake-lm-pad-level-0" style="color:rgb( 191 , 191 , 191 );margin:0px 8px 0px 0px;padding:0px;background:none 0% 0% / auto repeat scroll padding-box border-box rgba( 0 , 0 , 0 , 0 )"></span><span class="lake-preview-codeblock-content" style="color:rgb( 89 , 89 , 89 );margin:0px;padding:0px;background:none 0% 0% / auto repeat scroll padding-box border-box rgba( 0 , 0 , 0 , 0 )">$ nvm --version
0.34.0
$ node --version
v8.16.0
$ npm --version
5.0.0
$ vue --version
2.9.6
$ npm ls -g --depth=0
模板语法
1、文件结构
-template
-script
-css
2、插值语法，数据，js表达式
3、指令（指令缩写） @click，v-if, :href
vueCDN: https://www.bootcdn.cn/
代码示例
<html>
<head>
<!-- 可以在head标签中 通过CND引入-->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js";></script>
</head>
<body>
<!-- 模板部分-->
<div id="app">
<div>{ {message}}</div> <!--变量替换 hello world! -->
<div>{ { count + 1 }}</div> <!--数值运算 2 -->
<div>{ {template}}</div> <!--原样显示 <div>hello div</div> -->
<div v-html="template"></div> <!--标签解析 hello div -->
<!--属性绑定 3者等效-->
<div><a href="https://www.baidu.com";>百度</a></div>
<div><a v-bind:href="url">百度</a></div>
<div><a :href="url">百度</a></div>
<!--事件绑定 2者等效-->
<div><button v-on:click="add()">count+1</button></div>
<div><button @click="add()">count+1</button></div>
</div>
<!--js部分-->
<script>
new Vue({
el: "#app", // 绑定的对象
// 数据
data: {
message: "hello world!",
count: 1,
template: "<div>hello div</div>",
url: "https://www.baidu.com";
},
// 方法
methods: {
add: function() {
this.count += 1;
}
}
});
</script>
</body>
</html>
计算属性和侦听属性
软回车（换行不删除）：shift+enter
计算属性 computed 数据联动 监听多个属性
侦听器 watch 异步场景 监听一个属性
代码示例
<div id="app">
<div>{ {message}}</div>
<div>{ {fullMessage }}</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello"
},
// 侦听属性
watch: {
message: function(newVal, oldVal) {
console.log(oldVal + " => " + newVal);
}
},
// 计算属性
computed: {
fullMessage: function(){
return `数据：${this.message}`;
}
}
});
</script>
渲染
条件渲染: v-if, v-else, v-else-if; v-show
列表渲染: v-for
Class与Style绑定
代码示例
<div id="app">
<!-- if 条件判断 -->
<div v-if="count===0">
count的值===0
</div>
<div v-else-if="count > 0">
count的值 > 0
</div>
<div v-else>
count的值 < 0
</div>
<!-- show 条件判断 -->
<div v-show="count==5">
count的值 == 5
</div>
<!-- 循环渲染 -->
<div v-for="item in students">
{ {item.name}} | { {item.age}}
</div>
<!-- 循环渲染和条件渲染结合 -->
<div v-for="item in students">
<div v-if="item.age > 23">
{ {item.name}}: age>23
</div>
<div v-else>
{ {item.name}}
</div>
</div>
<!-- 样式渲染 -->
<div v-for="item in students">
<div v-show="item.age > 23"
:class="['red', 'gree', {'red': item.age<23}]"
:style="itemStyle">
{ {item.name}}
</div>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
count: 0,
students: [
{
name: "小仓",
age: 23
},
{
name: "小龙",
age: 24
}
],
// style属性
itemStyle: {
color: "red"
}
}
});
</script>
vue-cli
$ vue create hello-world # 创建项目
$ npm run server # 启动项目
1、组件化思想
实现功能模块复用
开发复杂应用
原则：
300行原则
复用原则
业务复杂性原则
2、风格指南
https://cn.vuejs.org/v2/style-guide/
3、Vue-router
配置router.js
4、Vuex
state 状态
mutations 方法集
actions
vuex管理不同组件共用变量，一个组件改变变量，另一个跟着改变。
store.js 定义全局数据和方法
export default new Vuex.Store({
// 定义公共的数据
state: {
count: 0
},
// 公共的方法
mutations: {
increase() {
this.state.count ++;
}
},
actions: {
},
});
info.vue 修改全局变量
<template>
<div>
info
<button @click="add()">加一</button>
</div>
</template>
<script>
// 导入文件 @相当于src目录
import store from "@/store"
export default{
name: "Info",
store,
// 整个生命周期绑定
mounted(){
window.app = this;
},
methods: {
add: function() {
console.error("加一");
debugger;
// 调用store中的increase方法
store.commit("increase");
},
output: function(){
console.log("out put");
}
}
}
</script>
about.vue调用全局数据
<template>
<div class="about">
<h1>This is an about page</h1>
<div>{ {msg}}</div>
</div>
</template>
<script>
import store from "@/store"
export default{
name: "About",
store,
data(){
return {
msg: store.state.count
}
}
}
</script>
5、调试
console.log()
console.error()
alert() 阻塞
debugger 断点
window对象绑定
6、集成vue
Git工作流
# 拉取仓库
git clone git@hello.git
cd hello
git status
git branch -a # 本地远程分支
git branch
# 添加新文件
touch text.txt
git status
git add .
git commit -m "初次提交"
git remote -v # origin 远程仓库
git push origin master # 推送到远程主干分支
# 新需求分支
git checkout -b dev
touch test1.txt
git add test1.txt
git commit -m "dev功能开发"
git push origin dev # 推送到dev分支
# 合并分支到master上
git checkout master
git merge dev
git push origin master # 提交到远程master分支
git branch -d dev # 删除本地dev分支
git push origin :dev # 删除远程dev分支
# 回退版本
git reset --hard head^ # 回退到上一版本
git log
git reflog
git reset --hard HEAD@{1}
快速原型开发
npm install -g @vue/cli-service-global
vue serve demo.vue
demo.vue
<template>
<div>
<ul>
<li v-for="(item, index) in list"
:class="{'active': index===currentIndex}"
:key="index"
@click="selectItem(index)"
>{ {item}}</li>
</ul>
<button type="button" @click="add()">添加</button>
<ul>
<li v-for="(item, index) in target"
:key="index"
>{ {item}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "demo1",
data() {
return{
currentIndex: -1,
list: [1, 2, 3, 4],
target: []
}
},
methods: {
add(){
if (this.currentIndex < 0){
return
}
this.target.push(this.list[this.currentIndex]);
this.currentIndex = -1;
},
// 选中的时候
selectItem(index) {
this.currentIndex = index;
}
}
}
</script>
<style>
.active{
background-color: green;
color: white
}
</style>
app应用
vue ui
localStorage
scss方式书写css
打包部署
npm run build
总结
模板语法
风格指南
vue-router、vuex、调试
vue-cli
vue集成
开发工作流
</div>
