Vue2.0 个人笔记

目录

• 一、概念
• 二、Vue的基础语法
  • • 2.1 插值语法
    • 2.2 v-bind 单向绑定
    • 2.3 v-for循环
    • 2.4 v-if v-else 判断
    • 2.5 v-show 显示与隐藏
    • 2.6 v-on 事件监听器
    • 2.7 v-model 双向绑定
    • 2.8 prop 数据传递
    • 2.9 计算与侦听
• 三、vue 生命周期钩子
• 四、Vue的组件基本写法
  • • 4.1：Vue的基本写法:
    • 4.2：了解组件:
    • 4.3 html文件:
    • 4.4：模块与组件:
    • 4.5 组件工程化
• 五、vue全家桶之router&vueX
  • • SPA(single-page application)
    • 5.1 router 模式解析
    • 5.2 VueX(状态管理)
    • 5.3 逐一解析Vuex
      • State:公共数据源
      • Mutation:变更state数据
      • Action 处理异步任务
      • Getter 对Store数据加工形成新数据
      • 一个Vuex的完整架构
• 六、Vue CLI 工程化(脚手架)
  • • 6.1 vue-cli的基本指令

一、概念

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的生命周期（简单的过程）

vue 生命周期 详解

四、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