Vue2.0 个人笔记
一、概念
MVC / MVP / MVVM
V : view 视图 :给用户看的网页，以及数据显示的部分
M: Mode 模型 ：存储数据
C: Controller 控制器 ：起一个调度的作用，
二、Vue的基础语法
v-text = 'xx' //文本绑定值
v-bind :title="message"//令message的值与title保持一致
v-on : click='xxx' //事件监听
v-if = 'xx'
xx.true/false //显示与隐藏
v-model ='xx' //双向绑定 用于表单,input
v-html ='xx' //用于输出html代码 xx:'<h1>xxzzz</h1>'
2.1 插值语法
<div id='dl'>
<p>{{message}}</p> // 用两个大括号圈起来，
</div>
var sa = new Vue({
el:'dl',
data:{
message:'文本内容'
}
})
2.2 v-bind 单向绑定
单向：数据只能从data流向页面
双向：数据能从data流向页面，还可以从页面流向data
<span v-bind:title="message"></span>
//title:123
//将这个元素节点的title与实例message值保持一致
<a v-bind:href="url">...</a>
//href attribute 与表达式 url 的值绑定
<a :href="url">...</a>
//缩写
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
new Vue({
el:'#x',
data:{
message:'123'
}
})
2.3 v-for循环
<!-- i代表索引 -->
<p v-for='(s.i) in list'>{{s.id}}+{{s.name}}</p>
<!--循环对象,v-for='(值,键,索引) in user' -->
<p v-for='(val,key,i) in user'> </p>
<!--循环数字,v-for='user in 4 ' 从1开始循环 -->
<p v-for='user in 4'>{{user}} </p>
new Vue({
el:'xx'
data:{
list[
{id:1,name:'xx1'}
{id:2,name:'xx2'}
{id:3,name:'xx3'}
]
user:{
id:1,
name:'xxx',
gender:'男'
}
}
})
2.4 v-if v-else 判断
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
<p v-else>现在呢</p> <!--当seen不为true时，显示-->
</div>
new Vue({
el:'#x',
data:{
seen:true
}
})
//当seen为flase时，之前显示的消息消失
更复杂的判断
v-if、v-else-if、v-else
<div id="app">
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else="type === 'NO'">NO A and B</div>
</div>
<!--当type为A时，显示A-->
<!--当type为B时，显示B-->
<!--当type为NO时，显示NO A and B-->
new Vue({
el:'#app',
data:{
return:{
type:'A',//B,NO
}
}
})
v-show 隐藏 是display:'none'
v-if 隐藏是 visibility:hidden;
2.5 v-show 显示与隐藏
<div id="app">
<h1 v-show="type === 'x'">Hello!</h1>
</div>
new Vue({
el:'#app',
data:{
return{
type:'x',//显示,不为x时隐藏
}
}
})
2.6 v-on 事件监听器
<div>
<button v-on:click="message">点击</button>
</div>
<!--缩写-->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
new Vue({
el:'#x',
data:{
},
methods:{
message(){
console.log('成功点击，弹出消息');
}
}
})
2.7 v-model 双向绑定
一般应用在表单类元素上，如input、select等
<input id="t" v-model="text">
<span>{{text}}</span>
<!--将同步更新消息-->
new Vue({
el:'#1',
data:{
text:'',
}
})
2.8 prop 数据传递
prop 数据单项传递，父影响子，子不影响父
所有 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来不行。这样会防止子组件意外变更父组件的状态，从而导致你的应用的数据流向难以理解。
2.9 计算与侦听
在模板中放入太多逻辑计算会让模板过重难以维护
如:
<div id="ap">
<span>{{ message.split('').reverse().join('') }}</span>
</div>
对于复杂逻辑，我们该使用计算属性
例:
<span>{{ message}}</span>
方案一：计算属性:computed
new Vue({
el:'#ap',
data:{
},
computed:{
//计算属性
message:function (){
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
方案二：使用方法
new Vue({
el:'#ap',
data:{},
methods:{
message:function (){
return this.message.split('').reverse().join('')
}
}
})
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。而计算属性只有当message发生改变时，才会重新计算，不然只会返回之前的计算结果
当一些数据需要跟着其他数据一起改变时，也使用计算属性版本
三、vue 生命周期钩子
每个Vue实例在被创建时都要经过一系列的初始化，
在这个过程中也会运行一些叫做生命周期钩子的函数，这给了我们在不同阶段添加自己代码的机会。
从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期
-
beforeCreate :实例被创建,还未初始化data和methods
-
created: 实例已创建，可以使用数据，更改数据，在这里改函数不会触发updated函数,一般可以在这里做初始数据的获取
-
beforeMount:开始找实例或组件对应模板，虚拟Dom已经创建完成,马上就要渲染，也可以在这里更改数据，是渲染前最后一次更改数据的机会
-
mounted:渲染出真实Dom,组件已经出现在页面中，数据，真实Dom已经处理好了,可访问到Dom节点，事件也挂载好了
-
在mounted下，会有两个生命周期钩子函数，那就是数据更新阶段的钩子函数
-
- beforeUpdate:页面数据更新之前，监听数据的改变，并且可以获取到最新的数据，但是不会更新页面的数据
-
- updated:数据更新完毕，在这个钩子函数中，我们可以获取当前最新的数据，组件Dom已经完成更新，请避免在此期间更改数据，因为会导致无限循环的更新
-
销毁阶段的钩子函数
-
beforeDestroy:销毁之前，还是可以使用HTML，在当前阶段实例完全可以被使用，我们进行收尾工作。如清除计时器，清除绑定与监听
-
destroyed:销毁之后,组件已被拆解，数据被卸除，监听被移出，子实例也统统被销毁，剩个空壳。
实例:
<script>
el:'name',
data(){
return{
}
},
methods:{
},
//第一个生命周期函数
beforeCreate(){
console.log('实例被创建')
},
created(){
// 在 created 中，data 和 methods 都已经被初始化好了！
// 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
},
beforeMount(){
//虚拟Dom已经创建完成，马上就要渲染，也可以在这更改数据
},
mounted(){
//组件出现在页面，数据，真实Dom处理好，事件挂载好
},
beforeUpdate(){
//不能更改数据，否陷入死循环
//获取最新数据，但页面数据不更新
},
updated(){
//组件Dom已经完成更新
},
beforeDestroy(){
//销毁前，一般为善后，清除计数器，监听等
}
destroyed(){
//销毁之后 组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。
}
</script>
参考文档：
四、Vue的组件基本写法
4.1：Vue的基本写法:
//js
<script>
new Vue({
el:"",
data:{},
methods:{},
created:{},
});
</script>
4.2：了解组件:
组件的基本: .js文件
Vue.component('xxx',{ //创建自定义的组件xxx
template:` `, //写html代码 是V：视图
props:[], //传输数据
data:function(){ //定义数据,是M:存储数据
return:{
}
},
methods:{ //方法
},
created:function(){
}
})
4.3 html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JS/vue.js"></script>
<script></script> <!--我们需要引用组件的js文件-->
</head>
<body>
<xxx> </xxx> <!--我们定义的组件-->
</body>
</html>
4.4：模块与组件:
//js
// Vue.component('my-addcomment',{ //添加评论
export default { //通过export default来导出
template:`
<section>
<div :style="side">
<h3 :style="ts">{{title}}</h3>
<span>作者</span>
<input v-model="inp.author" class="mobile"><br>
<span>内容</span>
<input v-model="inp.content" class="mobile"><br>
<button @click="skill">点击</button>
<hr>
</div>
</section>`,
props:['title'],
data:function () {
return{
side:{width:'400px',margin: '1em auto'},//border:'0px solid blue'
ts:{textAlign:'center'},
}
},
};
//html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JS/vue.js"></script>
</head>
<body>
<div id="add">
<Addcomment></Addcomment> //将其使用到页面中
</div>
<script type="module">
//通过import来导入:将每个模块都放进一个js中，然后引用
import Addcomment from "./JS/comment_add.js";
new Vue({
el: "#add",
components:{Addcomment},//声明Addcomment
data:{
} ,
});
</script>
</body>
</html>
4.5 组件工程化
将每个组件封装为一个后缀为.vue的文件，当需要使用时，将其import到页面上，如搭积木一样
在我们了解了Vue的组件后，我们需要知道一些组件的第三方组件，使我们的开发更加高效简便.
如: Element UI , iView, Ant Design.
五、vue全家桶之router&vueX
SPA(single-page application)
解释为只有一个HTML页面，通过路由实现页面内的局部切换，公共资源部分只加载一次
好处：整体一次下载，频繁的操作，可以减少网络流量
5.1 router 模式解析
路由分为两个模式(hash、history)，在脚手架配置可选择。
在main.js文件下，我们可以配置查看router
router跳转页面:
this.$router.push({
path:'/',
//传参
query:{
sex:'xx'
}
})
//从跳转后的界面接收参数
this.$route.query.sex
//监听
watch:{
'$route'(){
this.$router.go(0);
}
}
当回到首页时，数据重新加载
虽然底层的代码是后退，但是后退里我们添加了代码，
需要保证数据从新加载，防止访问旧数据
不论两种模式，底层都是调用了history.pushState与replaceState底层源码，也就是说，vue将原生的回退与前进进行了封装，叫做vue-router
嵌套路由:
//例:
import Vue from 'vue'
import VueRouter from 'vue-router'
//路由懒加载
const Home = ()=>import('../views/Home.vue');
const routes = [
{
//登录
path: '/',
name: 'Home',
component: Home,
//嵌套路由
children:[
{
//嵌套路由的path不需带'/'
//访问方式为:/Home/UserInformation
path:'UserInformation',
name:'Userinformation',
component:UserInformation,
}]
}
]
//在写好嵌套路由后，在需要显示的页面写上路由接口
<router-view></router-view>
5.2 VueX(状态管理)
VueX概念:
Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。
vuex基础配置:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//提供公共数据源,共享的数据都放入state
state: {
},
//对于state数据中的过滤
getters:{
}
//更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
//mutation中写有修改数据的逻辑。另外mutation里只能执行同步操作
mutations: {
},
//对于store中数据的修改操作动作在action中提交。
actions: {
},
//module,模块化。
modules: {
}
})
5.3 逐一解析Vuex
State:公共数据源
export default new Vuex.Store({
state: {
name:'十五'
},
组件中访问 state 中数据的有两种方式
一、
this.$store.state.名称
如例:
this.$store.state.name //十五
二、
//从vuex中按需导入mapState
import {mapState} from 'vuex'
//将全局数据，映射为当前组件的计算属性
computed:{
...mapState(['name'])
}
Mutation:变更state数据
- 只能通过 mutations变更 Store 数据，不可以直接操作 Store 中的数据。
- 可以集中监控所有数据的变化
触发Mutation两种方式:
情况:
export default new Vuex.Store({
state: {
num:0
},
mutations: {
unmAddOne(state){
//num+1
state.num++;
}
},
--------------------------------------------------
一、
methods:{
addOne(){
//commit:提交
this.$store.commit('unmAddOne')
//多个参数
this.$store.commit("gaixie","十六七");
}
}
二、
import {mapMutations} from 'vuex'
//修改
this.unmAddOne("参数");
methods:{
...mapMutations(['unmAddOne'])
}
Action 处理异步任务
- 如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发 Mutation的方式间接变更数据。
Getter 对Store数据加工形成新数据
- Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性 。
- Store 中数据发生变化，Getter 的数据也会跟着变化。
配置如:
export default new Vuex.Store({
state: {
name:'十五'
},
getters:{
NumText(store){
return "当前值"+num
}
},
使用:
一、
this.$store.getters.名称
如例:
this.$store.getters.NumText
二、
import {mapGetters} from 'vuex'
//指定的getters,映射为当前组件的methods函数,一个方法
computed:{
...mapGetters(['NumText'])
}
一个Vuex的完整架构
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//暴露Store
export default new Vuex.Store({
//数据源:存放数据
state: {
},
//数据的修改，使用commit提交
mutations:{
//例:
dataAdd:(state,msg)=>{
state.tt = msg;
}
},
//数据的加工
getters:{
},
//异步处理任务
actions:{
},
//数据模块化
modules:{
}
})
六、Vue CLI 工程化(脚手架)
CLI是一个全局安装的npm包，它可以将vue生态中的工具基础标准化，构建一整套基础配置
帮助程序员们快速搭建基于vue框架开发环境的工具
是一个为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板
6.1 vue-cli的基本指令
- 首先，需要下载并安装 nodejs。安装完 nodejs 后，在命令行窗口就可以使用两个命令了: node, npm
npm (node package manager) 是一个项目和包管理工具
- 1.在node安装文件下创建文件夹node_global(全局)和node_cache,
- 输入指令:
//node目录下自己创建的路径
- npm config set prefix "C:\Program Files\Nodejs\node_global"
-npm config set cache "C:\Program Files\Nodejs\node_cache"
//设置淘宝
npm config set registry=//registry.npm.taobao.org
- 其次，使用 npm 下载并安装 vue 脚手架。安装完之后，你会得到一个 vue 命令
npm install -g @vue/cli # 注意，不要落下 -g，这个的意思是安装为全局命令
- 然后，就可以使用 vue 命令做你想做的事情了
- 创建项目
vue create xxx
- 为项目添加外部插件
vue add axios
vue add element
vue add router
vue add vuex
- 启动开发服务器
cd xxx
npm run serve
- 将源代码打包，并准备部署
npm run build - 生成一个dist文件
npm i -g serve(安装serve容器)
- 启动
serve dist
