美文网首页vue学习笔记
慕课网Vue知识进阶学习笔记

慕课网Vue知识进阶学习笔记

作者: 果木山 | 来源:发表于2019-07-04 10:14 被阅读0次

慕课网Vue知识进阶

慕课网学习网址

1. vue环境搭建

2.计算属性和侦听器

  • watch和computed的使用场景
    • watch:异步场景:通常监听的是一个变量或一个常量的变化;
    • computed:数据联动;通常监听很多个变量,变量必须是vue实例中的变量;
  • v-if、v-else-if、v-else三者的使用
    • 绑定在标签上,三者配合使用,等同于if、else if、else功能;
  • class和style绑定
    • 通过v-bind:xxx:xxx来绑定标签属性;
    • 绑定class和styled的方法是类似的
      • 绑定class: 1)赋值为数组,数组元素为类名;如:<div v-bind:class="['active','mass']">xxx</div>;2)赋值为对象表达式;如<div v-bind:class="{'active':true}";3)赋值为变量;变量设置在实例data中;
      • 绑定style: 1)赋值为对象,对象中为样式键值对;如:<div :style="{color: 'red',marginTop: '5px'}">xxxx</div>;2)赋值为变量,变量设置在实例data属性中;
    • 验证代码:
     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>v-if、v-if-else、v-else和class与style的绑定</title>
         <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
     </head>
     <body>
     <div id="app">
         <div v-if="count >= 0">
             count大于0
         </div>
         <div v-else-if="count <0 && count > -6">
             count小于0大于-6
         </div>
         <div v-else>
             count小于-6
         </div>
         <div>
             <p>count的值为:{{count}}</p>
             <button @click="handleClick">递减</button>
         </div>
         <div :class="['active','mass',{'tian':count===-2}]" :style="{color: 'red',marginTop: '5px'}">美好的世界,美好的明天!!!</div>
         <div :class="classmsg" :style="stylemsg">让我们红尘作伴</div>
     </div>
     <script>
         var app=new Vue({
             el: "#app",
             data:{
                 count: 2,
                 classmsg:['active','mass',{'tian':true,'ming':true}],
                 stylemsg:{
                     color: "blue",
                     marginTop: "20px"
                 }
             },
             methods:{
                 handleClick: function(){
                     this.count--;
                 }
             }
         })
     </script>
     </body>
     </html>
    

3.vue-cli创建项目工程

  • vue-cli下载与卸载
    • 下载3.x版本的vue:npm install -g @vue/cli;即:同时下载了vue和vue-cli;
    • 卸载:npm uninstall -g vue-cli;
  • vue-cli项目创建方法:两种
    • 第一种方法:命令行创建
      • 创建:vue create 项目名; =》下载依赖,生成项目所有文件;
      • 进入创建的文件:cd 项目名; =》进入项目名文件夹
      • 运行服务器:npm run serve =》开启服务器,运行项目;
    • 第二种方法:ui界面创建
      • 命令行:vue ui =》开启ui界面服务器;
      • 浏览器打开:http://localhost:8000 =》加载网址,进入ui界面;
      • 进入ui界面进行创建项目;=》进入界面,设置路径,创建项目名等;
      • vue ui创建项目
        • 选择Babel / Router / Vuex / CSS Pre-processors/使用配置文件
        • Sass/SCSS
        • 尽量不保存预设
    • 以上两种方法,创建后的文件均是一样的;
    • 参考链接:vue-cli两种方法创建项目视频讲解链接
  • vue版本为3.x的vue-cli创建的项目中修改host和port
    • 在项目根目录下创建vue.config.js文件;
    • 配置内容:
     module.exports={
       devServer: {
         open: process.platform ==='darwin',
         host: '0.0.0.0',//使用本机ip进行域名加载
         port: 9099,//修改后的端口号
         https: false,
         hotOnly: false,
         proxy: null,
         before: app => {}
       }
     }
    

4.Vuex

  • 单向数据流
    • 概念:View(视图),Actions(行为),State(状态) 三者之间相互影响
  • 作用
    • vuex作为跨组件之间的状态管理,进行跨组件之间的数据传递
  • Vuex使用场景
    • 多个视图依赖于同一个状态(例:菜单导航)
    • 来自不同视图的行为需要变更同一状态(例:评论弹幕)
  • Vuex特点
    • 为Vue.js开发的状态管理模式
    • 组件状态集中管理
    • 组件状态改变遵循统一的规则
  • 使用vuex
    • 下载模块vuex
    • 创建store.js文件,输出对象;
      • 对象中三个属性state,mutations,actions
      • state:存储状态值
      • mutations:存储方法集,设置函数,操作state中的状态值;
      • actions: 未知;
      • 代码:
       import Vue from 'vue'
       import Vuex from 'vuex'
       
       Vue.use(Vuex)
       
       export default new Vuex.Store({
         state: {
           //设置组件状态值
           count: 0
         },
         mutations: {
           //方法集:设置函数,用于操作组件state中的状态值,其中第一个参数为对象,第二个参数为调用函数时传递来的实参;
           increase(states,arg){
             this.state.count ++
           }
         },
         actions: {
       
         }
       })
      
      
    • main.js中引入store.js文件,在根实例中设置store属性;
      • 代码:
       import Vue from 'vue';
       import App from './App.vue'
       import store from './store'
       
       Vue.config.productionTip = false
       
       new Vue({
         store,
         render: h => h(App)
       }).$mount('#app') 
      
    • 组件中使用store.js
      • 引入store.js组件对象;
      • export default {}中设置store属性,属性值为store.js组件对象;
      • 组件中使用store内mutations中的函数:store.commit("函数名","参数")
        • 代码:
         <template>
           <div>
             <h1>我是info页面</h1>
             <p><button @click="add">点击我</button></p>
           </div>
         </template>
         <script>
             import store from "../store.js"
             export default {
                 name: "info",
                 store,
                 data(){
                     return {
         
                     }
                 },
                 methods: {
                     add(){
                       //改变状态
                       store.commit("increase","参数")
                     }
                 }
             }
         </script>
        
      • 组件中使用store内state中的状态值:store.state.xxx
        • 代码:
         <template>
           <div class="about">
             <h1>This is an about page</h1>
             <p>{{msg}}</p>
           </div>
         </template>
         <script>
           import store from "../store.js";
           export default {
             name: 'about',
             store:store,
             data(){
               return {
                 msg: store.state.count
               }
             }
           }
         </script>
        

5.git简介

  • git基本操作
    • 创建项目:git init初始化文件,git clone克隆创建
    • 创建分支,推送分支,合并分支
    • 删除分支,回退版本
  • 命令:
    • git status:查看所位于的当前分支的信息;
    • git branch -a:查看本地和远程所有的分支信息;
    • git checkout -b 分支名:创建新的本地分支;
    • git push 远程通道名 分支名:推送到远程通道的分支上,即可建立远程分支;
    • git checkout 分支名:切换到指定分支上;
    • git merge 待合并的分支名:合并指定的分支上的文件到当前分支上;指的是本地分支;
    • git branch -D 分支名:删除本地分支;
    • git push 远程通道名 :分支名:删除远程分支;
    • git reset --hard head^:退回到上一次推送之前的版本;
    • git reglog:查看日志,显示所有推送的版本信息;
    • git reset --hard xxx:退回指定日志的版本;
  • 注意
    • 推送的远程通道名需要跟本地的通道名相同,才能推送成功;
  • 参考链接:git的基本操作

6.小项目实战

  • 知识点:
    • views视图中的组件创建,路由跳转,嵌套路由的应用;
    • vuex跨组件之间传递数据;
    • v-if和v-else的条件判断使用;
    • localStorage本地存储的知识复习;
    • sass样式知识的了解和使用
  • 参考链接:

相关文章

网友评论

    本文标题:慕课网Vue知识进阶学习笔记

    本文链接:https://www.haomeiwen.com/subject/orqlhctx.html