了解vue2.x的核心技术
建立前端组件化的思想
常用的vue语法
vue-router，vuex，vue-cli
使用vue-cli工具
Vue框架常用知识点
vue核心技术
集成Vue
重点看，重点记
模板语法，条件渲染，列表渲染
vuex，vue-router
v-bind属性绑定，事件绑定
Class与Style绑定
workflow工作流
单页面
Cli工具登录环境
- vue常用模板语法
- 列表渲染、条件渲染
- Class与style绑定
- vue事件绑定与处理
- vue计算属性computed, watch
- vue-cli快速创建工程
- vue的组件思想，代码规范
- vue-router介绍
- 认识vuex，组件间的通信方式
- 前端调试方法，vue组件调试方法
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
or Wget:
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
export NVM_DIR="${XDG_CONFIG_HOME/:-$HOME/.}nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
开发环境：
ide，node.js，调式环境，工程环境
node --version
npm i -g vue-cli
vue --version
环境：
ide: webstrom，vscode
npm: vue-cli，webpack，cnpm，nvm
Chrome: Vue调式插件
Vue:
声明式渲染
条件渲染
列表
事件
热部署：gulp，webpack
认识样式：sass，postcss
模板语法
计算属性
Class，Style绑定
条件渲染
列表渲染
事件处理
表单输入绑定
组件基础，生命周期，模块化的思想
组件：
组件通信方式：props，$parent，emit event，Vuex
动画，vue-router, Vue-resource
常用api：
vue-use
props
dom
部署，服务器端渲染，打包编译
vue，基础概念，组件，api，部署
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
hello world!!
</body>
</html>
BootCDN
稳定、快速、免费的前端开源项目 CDN 加速服务
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg {
color: red;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div class="bg">
hello world!!
{{msg}}
</div>
<script>
new Vue({
el: '.bg',
data: {
msg: 'hello vue!'
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg {
color: red;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div class="bg" id="app">
hello world!!
{{msg}}
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello vue!'
}
})
</script>
</body>
</html>
vue.js cdn使用
模板语法
vue的文件结构：
template
script
style
模板语法包含插值，指令
// 错
{{template}}
<script>
new Vue({
el: '#app',
data: {
msg: 'hello vue!!',
count: 0,
template: '<div>hello template</div>'
}
})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg {
color: red;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div class="bg" id="app">
hello world!!
{{msg}}
<div v-html="template"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello vue!',
template: '<div>hello dashucoding</div>'
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg {
color: red;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div class="bg" id="app" v-bind:id="bg1">
hello world!!
{{msg}}
{{count}}
<div v-html="template"></div>
<a v-bind:href="url">百度</a>
<a :href="url">百度</a>
<button type="button" v-on:click="submit()">加</button>
<button type="button" @click="submit()">加</button>
</div>
<script>
new Vue({
el: '#app',
data: {
bg1: 'app-bind',
msg: 'hello vue!',
template: '<div>hello dashucoding</div>',
url: 'http://www.baidu.com',
count: 0
},
methods: {
submit: function() {
this.count++
}
}
})
</script>
</body>
</html>
vue文件结构
插值语法{{msg}}
数据
js表达式
指令
@click
v-if
:href
计算属性与侦听器
计算属性：computed
侦听器：watch
使用场景：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<p>{{msg1}}</p>
</div>
<script>
var arr = 'da'
var app = new Vue({
el: '#app',
data: {
msg: 'Hello Vue!',
another: 'another hello'
},
// 监听
watch: {
msg: function (newval, oldval) {
console.log('newval is:'+newval)
console.log('oldval is:'+oldval)
}
},
computed: {
msg1: function () {
return 'computed:' + this.msg + "," + this.another + arr
}
}
})
</script>
</body>
</html>
arr改变时不会变化，只有msg1里面的内容改变才会发生变化
watch异步场景，computed数据联动
条件渲染，列表渲染，Class与Style绑定
条件渲染：
v-fi
v-else
v-else-if
v-show
列表渲染：
v-for
<div id="app">
<div v-if="count>0">
</div>
<div v-else>
</div>
</div>
<div v-for="item in list">{{item}}</div>
<div v-for="item in list">{{item.name}}</div>
<script>
new Vue({
el: '#app',
data: {
list: [{
name:
age
},{
}]
}
})
v-bind:style="{ 'color': 'red' }"
v-bind:style="styleMsg"
:class="{ 'active': ture }"
:style="styleMsg"
data: {
style: {
colord: red
},
styleMsg: {
color: 'red',
textShadow: '0 0 5px green'
}
}
<div v-show=""
:class="[ 'active', 'add', 'more', { 'another' : ture } ]"
:style="styleMsg">
工程化，页面代码规范，调式vue
请点赞！因为你的鼓励是我写作的最大动力！
吹逼交流群：711613774