VUE学习笔记整理20200407

2020-04-17  本文已影响0人  我有一个dream

VUE学习笔记整理

v-cloak能够解决传值闪烁的问题

<img src="C:\Users\Dell\AppData\Roaming\Typora\typora-user-images\1576598096146.png" alt="1576598096146" />

v-bind是提供的一个绑定属性,会把变量加上一个表达式

[图片上传失败...(image-e7ce8f-1587091357139)]

  1. v-bind可以简写为 :
  2. VUE中提供了v-on事件绑定机制可以用@代替v-on
<input type="button" value="按钮" v-on:click="show"/>

然后在对象里面添加

method{
    show:function(){
        //...需要点击事件执行的代码
    }
}
  1. 如何定义一个基本Vue代码结构
  2. 插值表达式和v-text
  3. v-cloak是消除传值闪烁
  4. v-html将data里面的数据以html的形式插入
  5. v-bind
  6. v-on
//注意在vm实例中如果想获取data上的数据,想要调用methods中的方法,必须通过this.数据属性名
//来访问,this就表示我们new出来的VM实例对象
var vm = new Vue({
    el:'#app',
    data:{
        msg:'野狼disco!~'
    },
    methods{
        lang(){
            console.log(this.msg);//野狼disco!~
        }
    }
});

<img src="C:\Users\Dell\AppData\Roaming\Typora\typora-user-images\1576600755329.png" alt="1576600755329" style="zoom:50%;" />

箭头函数解决了this的指向问题

样式的写法

[图片上传失败...(image-4808b4-1587091357139)]

data:{
    cssName:{color:red,kfont}
}

V-for循环普通数组

var vm = new Vue({
    el: '#app',
    data:{
        list:[1,2,3,4,5,6,7]
    },
    method:{}
});

<p v-for="(item,i) in list">
    {{item}}
</p>

V_IF和V_FOR的使用

<h3 v-if="flag">
    这是用v-if控制的元素
</h3>
<h3 v-if="flag">
    这是用v-show控制的元素
</h3>

[图片上传失败...(image-de1ffc-1587091357139)]

[图片上传失败...(image-349005-1587091357139)]

发送请求到后台

[图片上传失败...(image-5564e1-1587091357139)]

全局配置,可以省去上去的{emulateJSON:true}的参数,可以简化配置

Vue.http.options.emulationJSON = true;

Vue的组件的学习

组件的出现是为了拆分vue的模块的,拆分代码量,不同的功能不同的组件

方便UI组件的的重用

模块化

方便分层开发

Vue.extends({
    template:'<h3>这是通过Vue.extends创建的组件</h3>'
    //通过template属性,指定组件要拓展的HTML结构
});
//Vue.component('组件的名称,创建出来的组件模块对象');
Vue.component('myCom1',com1);

第二种方式

//引用<my-comm></my-comm>来用
Vue.component('myComm',Vue.extend({
        template:'<h3>这是一个component组件</h3>'
    }));

注意:必须只有一个根元素

//引用<my-comm></my-comm>来用
Vue.component('myComm',Vue.extend({
        template:'<h3>这是一个component组件</h3><span></span>'//这样就报错
    }));
 //修正

    Vue.component('myComm',Vue.extend({
        template:'<div><h3>这是一个component组件</h3><span></span></div>'//这样就报错
    }));

第三种方式

<div id="app">
    <mycom></mycom>
</div>
<template id="comp1">
    <div>
        <span>我是span</span>
        <h2>我是h2</h2>
        <a href="javasript:;">我是a</a>
    </div>
</template>
<script>
    // Vue.component('mycom',Vue.extend({
    //     template: '#comp1'
    // }));
    Vue.component("mycom",{
        template:'#comp1'
    });
    var vm = new Vue({
        el:'#app',
        data:{

        },
        methods:{

        }
    });
</script>

//注册私有组件
var vm2 = new Vue({
        el:'#app2',
        data:{

        },
        methods:{

        },
        filters:{},
        directives:{},
        components:{
            login:{
                template:'<h3>我是h3</h3>'
            }
        },
        beforeCreate(){},
        created(){},
        beforeMount(){},
        mounted(){},
        beforeUpdate(){},
        updated(){},
        beforeDestroy(){},
        destroyed(){}
    });

组件可以有自己的data

Vue.component("mycom",{
        template:'#comp1',
        data:function(){
            return {msg:'zs'};
        }
    });

组件也有data,是一个函数,返回的是对象,method一样

<div id="app2">
    <mycomSmycom>
    <login></login>
</div>
<template id="comp1">
    <div>
        <input type="button" value="点击我+1" @click="increment">
        <h3>{{count}}</h3>
    </div>
</template>
<script>
    // Vue.component('mycom',Vue.extend({
    //     template: '#comp1'
    // }));
    Vue.component("mycom",{
        template:'#comp1',
        data:function(){
            return {count:0};
        },
        methods:{
            increment(){
                this.count++;
            }
        }
    });
</script>

[图片上传失败...(image-17516-1587091357139)]

父组件把方法传递给子组件

<body>
<div id="app">
    <!--父组件向子组件传递方法,使用的是,时间绑定机制:v-on当我们自定义了一个属性之后,那么子组件-->
    <!--就能够通过某些方式来调用,传递进去的这个方法了-->
    <com2 @func="show"></com2>
</div>
<template id="tmp1">
    <div>
        <h1>这是一个子组件</h1>
        <input type="button" value="触发子组件的myclick事件" @click="myclick"/>
    </div>
</tmplate>
<script>
    var com2 ={
        template:'#tmp1',
        methods:{
            myclick(){
                console.log("这是一个子组件的click事件");
                this.$emit('func');
            }
        }
    };
    var vm = new Vue({
        el:'#app',
        data:{

        },
        methods:{
            show(){
                console.log("这是一个show");
            }
        },
        components:{
            com2
        }
    });
</script>
</body>

show是父组件的方法,我们想在子组件中调用父组件的方法,就得使用父组件向子组件传值的方法来做


<body>
<div id="app">
    <!--父组件向子组件传递方法,使用的是,时间绑定机制:v-on当我们自定义了一个属性之后,那么子组件-->
    <!--就能够通过某些方式来调用,传递进去的这个方法了-->
    <com2 @func="show"></com2>
</div>
<template id="tmp1">
    <div>
        <h1>这是一个子组件</h1>
        <input type="button" value="触发子组件的myclick事件" @click="myclick"/>
    </div>
</template>
<script>
    var com2 ={
        template:'#tmp1',
        data(){
            return {
                sonmsg:{name:'zs',age:18}
            }
        },
        methods:{
            myclick(){
                console.log("这是一个子组件的click事件");
                this.$emit('func',this.sonmsg);//从第二个参数开始就是传参的参数
            }
        }
    };
    var vm = new Vue({
        el:'#app',
        data:{
            dddd:null
        },
        methods:{
            show(data){
                console.log(data);
                this.dddd=data;
            }
        },
        components:{
            com2
        }
    });
</script>
</body>
</html>

使用ref 来获取DOM元素

<h3 id="myh3" ref="myh3"> 来定义一个ref的引用

console.log(this.$refs.myh3.innerText); 获取ref的dom元素

还可以获取组件的引用

<div id="app">
    <login ref="mylogin"></login>
    <input type="button" value="获取元素" @click="getElement">
    <h3 id="myh3" ref="myh3"><!--使用ref-->
        哈哈哈哈,今天是一个好日子!!!
    </h3>
</div>
<script>
    var login = {
        template:'<h1>登录组件</h1>',
        data(){
            return {
                msg:'son msg'
            }
        },
        methods:{
            show(){
                console.log("调用了子组件的方法");
            }
        }
    }

    var vm = new Vue({
        el:'#app',
        data:{

        },
        methods:{
            getElement(){
                // console.log(document.getElementById("myh3").innerText);
                // console.log(this.$refs.myh3.innerText);
                console.log(this.$refs.mylogin.msg);
                console.log(this.$refs.mylogin);
            }
        },
        components:{
            login
        }
    });
</script>
</body>

监视变化的事件

监听事件的改变属性

data:{
            firstname:'',
            lastname:'',
            fullname:''
        },
        methods:{
            getFullName(){
                this.fullname = this.firstname+"-"+this.lastname;
            }
        },
        watch:{
          //使用这个属性,可以监视data中指定数据的变化,然后触发这个watch中对应的数据
            'firstname':function(newVal,oldVal){
                console.log('监视到了fistname的变化了');
                this.fullname = this.firstname + this.lastname;
            }
        }

在什么场景下更适合使用哪一个

/*计算属性和methods和watch之间的区别    1.在methods里面可以写大量的逻辑    2.computed属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算,主要当做属性来使用    3.watct一个对象,键是需要观察的表达式,值是对应回调函数,主要用来监听某些特定的数据的变化,从而进行某些具体的业务逻辑操作,可以看做    是computed和methods的结果体*/

nrm的安装使用

nrm ls 是展示有的所有的镜像的源地址

nrm use npm 使用哪一个nrm

使用nrm use npm 或nrm use taobao 切换不同的镜像的源地址

Webpack的学习

.ts typescript语言

减少了依赖的关系,和资源的请求

webpack .\src\main.js -o .\dist\bundle.js webpack打包的命令

npm install webpack-cli -g 通过npm安装webpack的客户端


const path = require('path')
 
module.exports = {  //输出模块
    entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪个文件
    output: { // 输出文件相关的配置
        path: path.join(__dirname, './dist'), // 指定 打包好的文件，输出到哪个目录中去
        filename: 'bundle.js' // 这是指定 输出的文件的名称
    }
};

//配置要打包的路径,和打包好的输出路径,就可以帮我们打包好文件

[图片上传失败...(image-ec5a7d-1587091357139)]

cnpm i less-loader -D 下载less

cnpm i sass-loader -D 下载sass

npm i 安装包

了解:目前我们安装的babel-preset-env是比较新的语法,之前,我们安装的是babel-preset-es2015,现在出现了一个babel-preset-env

[图片上传失败...(image-7c3677-1587091357139)]

第一套

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

第二套

cnpm i babel-preset-env babel-preset-stage-0 -D

[图片上传失败...(image-d24a98-1587091357139)]

webpack构建vue

npm i vue -S 将vue这个包运行依赖

导入vue,配置别名

resolve:{
    alias:{
        "vue$":"vue/dist/vue.js"
    }
}
webpack中使用vue的总结
//总结梳理:webpack中如何使用vue;
//1.安装vue的包  cnpm i vue -S
//2.由于在webpack中推荐使用vue这个组件模板文件定义组件,所以需要安装能解析这种文件的loader  cnpm i //vue-loader vue-template-complier -D
//3.在main.js中导入vue模块 import Vue from 'vue'
//4.定义一个vue结尾的组件,其中组件有三部分组成:template script style
//5.使用import 导入这个组件
//6.创建vm实例,var vm = new Vue({el:'#app',render:c => return c(login)})
//7.在页面中创建一个为app的div元素,作为我们vm实例要控制的区;

向外暴露

//这是node中向外暴露成员的形式
//在ES6中,也通过规范的形式,规定了ES6中如何导入和导出模块
//ES6中导入模块,使用import模块名称from '导入表示符' import '表示路径'


//在node中,使用vue 名称 = require('模块标识符') 导入
//module.exports和exports来暴露成员 

var info = {
    name:'zs',
    age:19
}
var addr = {
    address:'北京'
}
export default info
//注意:export default 向外暴露的成员,可以使用任意的变量来接收
//在一个模块中export default只允许向外暴露一次
export var title = '小新星'
//在一个模块中可以同时使用 export default 和export 
//使用export可以到处多个
//使用export必须要{exportName}接收
//如果想要换一个名称接受,可以使用as

在webpack中安装vue-router

cnpm i vue-router -S 安装包

样式

<style lang="scss" scoped>
    /*
        1. scoped  只是在该组件内有效果使用scoped
        2. 如果是在组件内的,建议吧scoped属性都加上
        3.lang="scss" 表示是可以使用scss的样式的
    */
    h1{
        color:aqua
    }
</style>

mint-UI

// 安装
# Vue 1.x
npm install mint-ui@1 -S
# Vue 2.0
npm install mint-ui -S

// 引入全部组件
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);
// 按需引入部分组件
import { Cell, Checklist } from 'mint-ui';
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);

Git 的使用

git init 初始化git

git status 将文件添加到git中

git add .

git commit -m 'init my project' 提交

git remote add origin https://github.com/tfzhHackCoder/vue-crm.git 和远程仓库做一下关联

git push -u origin master 提交到远程仓库

git pull拉取代码

git push -f origin master 强制提交代码

git remote rm origin    删除远程仓库

linkActiveClass 当路由被激活,触发样式

mint-ui 文档地址

<a href='http://mint-ui.github.io/docs/#/'>mint-ui</a>

导入时间插件

//cnpm i moment -S  安装时间插件的包
//引入时间的插件
import moment from 'moment';
//定义一个全局过滤器
Vue.filter('dateFormat',function (dataStr,pattern="YYYY-MM-DD HH:mm:ss") {
    return moment(dataStr).format(pattern);
})

使用懒加载,mint-ui的懒加载图片

获取id

this.$route.params.id 获取id

vue的生命周期的

//beforecreate : 一般使用场景是在加 loading事件 的时候
//created ：处于loading结束后，还做一些初始化，实现函数自执行（data数据已经初始化，但是DOM结构渲染完成，组件没有加载）
//beforemount：处于组件创建完成，但未开始执行操作
//mounted ：处于发起后端请求，获取数据，配合路由钩子执行操作（DOM渲染完成，组件挂载完成 ）
//beforeupdate、updated：处于数据更新的前后
//beforeDestroy：当前组件还在的时候，想删除组件
//destroyed ：当前组件已被销毁，清空相关内容

created 与 mounted 的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
mounted 与 methods 的区别

mounted 是生命周期方法之一，会在对应生命周期时执行。

methods 是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，未调用不会执行，只执行逻辑，返回值可有可无。

computed 与 watched 的区别

computed 是计算属性，也可以理解为一个方法。其中计算的结果如果不发生改变就不会触发，且必须返回一个值并在DOM中绑定的才能取得值。他可以自动获取数据的改变。

watched 属性是手动定义的所需监听的值，不同的数据可以在其中多次定义监听值，这时会消耗一定性能，他并不能像computed那样自动改变。

* 代表无序列表

安装图片缩略图的插件

npm i vue2-preview -S 安装命令

import VuePreview from 'vue2-preview'
Vue.use(VuePreview)

examples

<template>
  <div>
    <div style="height: 1000px; background-color: pink;"></div>
    <vue-preview
      :list="list"
      :thumbImageStyle="{width: '80px', height: '80px', margin: '10px'}"
      :previewBoxStyle="{border: '1px solid #eee'}"
      :tapToClose="true"
      @close="closeHandler"
      @destroy="destroyHandler"
    />
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      list: [
        {
          src: 'https://placekitten.com/600/400',
          w: 600,
          h: 600
        },
        {
          src: 'https://placekitten.com/1200/900',
          w: 1200,
          h: 900
        }
      ]
    }
  },
  methods: {
    // 即将关闭的时候，调用这个处理函数
    closeHandler() {
      console.log('closeHandler')
    },
    // 完全关闭之后，调用这个函数清理资源
    destroyHandler() {
      console.log('destroyHandler')
    }
  }
}
</script>
参数 说明 类型 必须
list 图片列表 Array 是
thumbImageStyle 缩略图的样式 Object 否
previewBoxStyle 缩略图容器的样式 Object 否
tapToClose 是否允许单击关闭 Boolean 否
close 监听预览窗口关闭的事件(关闭前触发) Function 否
destroy 监听预览窗口销毁的事件(关闭后触发) Function 否

边框阴影

 box-shadow: 10px 10px 20px 10px rgba(255,255,0,0.5)

区分this.$route是路由参数对象,params和query都属于它

其中:this.$router是一个路由的导航对象,用它可以方便的使用js实现路由的前进,后退,跳转到URL地址

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

    //传值个子组件  
    <swip :images="images"></swip>


npm install -g @vue/cli

vue create

//引入jquery

import $ from 'jquery'

发送post请求

methods: {
    research: function () {
        //post请求远程资源
        this.$http.post(
            //请求的url
            "http://www.hefeixyh.com/login.html",
            //请求参数，不能以get请求方式写：{params: {userName: "root123", passWord: "root123"}}
            {userName: "root123", passWord: "root123"},
            //解决跨域问题，不加无法跨域
            {emulateJSON: true}
        ).then(
            function (res) {
                console.log(res);
                this.msg = res.bodyText;
            },
            function (res) {
                console.log(res.status);
            }
        );
    }
}

发送get请求

$http.get('api/url-api').then(successCallback, errorCallback);

function successCallback(response){
    //success code
}
function errorCallback(error){
    //error code
}

使用钩子函数控制动画

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <style>
    .ball {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="app">
    <input type="button" value="快到碗里来" @click="flag=!flag">
    <!-- 1. 使用 transition 元素把 小球包裹起来 -->
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" v-show="flag"></div>
    </transition>
  </div>

  <script>

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {
        // 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象
        // 大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
        beforeEnter(el){
          // beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式
          // 设置小球开始动画之前的，起始位置
          el.style.transform = "translate(0, 0)"
        },
        enter(el, done){
          // 这句话，没有实际的作用，但是，如果不写，出不来动画效果；
          // 可以认为 el.offsetWidth 会强制动画刷新
          el.offsetWidth
          // enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
          el.style.transform = "translate(150px, 450px)"
          el.style.transition = 'all 1s ease'

          // 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
          done()
        },
        afterEnter(el){
          // 动画完成之后，会调用 afterEnter
          // console.log('ok')
          this.flag = !this.flag
        }
      }
    });
  </script>
</body>

</html>

vuex

是vue配套的公共管理工具,他可以共享的数据,保存到vuex中,方便整个程序任何组件直接修改我们的公共数据

vuex是为了保存组件之间共享数据而诞生的,如果组件之间有要共享的数据,可以直接挂载到vuex上,而不必通过父子组件之间传递了,如果组件的数据不需要共享,此时这些不需要共享的私有数据,没有必要放到vuex中

只有共享的数据,才有权利放到vuex中,只有共享的数据,才有权利放到vuex中,组件内部私有的数据,只要放到data中即可

props和data和vuex的区别

vuex就相当于一个数据的仓库

import Vue from 'vue'
import App from './App.vue'
//配置vuex的步骤
//1.运行cnpm i vuex -S
//2.导入包
import Vuex from 'vuex'
Vue.use(Vuex)
//3.注册vuex到vue中
var store = new Vuex.Store({
  state:{
    //可以把state想象成组件中的data
    count:0
  },
  mutations:{
    //可以把mutations想象成methods
  }
})


Vue.config.productionTip = false

const vm = new Vue({
  render: function (h) { return h(App) },
  store:store,
  router:router
}).$mount('#app')

如果要修改store中的值,只能通过调用mutation提供的方法,才能操作对应的数据,不推荐直接操作state中的数据,因为,万一导致数据的紊乱,找问题不好排查,不能快速定位到问题的原因

只能通过mutation中的方法才能排查到原因

 increment(state){
        state.count++;
    }
    //如果组件想要调用mutation中的方法,只能使用this.$store.commit('方法名')
    //这种调用mutation方法的格式,额this.$store.commit("increment");

//mutation 的方法中,最多支持两个参数,第一个参数是状态,第二个事传递的值

  getters:{
    //注意,getters只负责向外提供数据,不负责修改数据,如果想要修改state中的数据请找mutations
    optCount:function(state){
        return '当前最新的count值是:' +state.count
    }
    //经过回顾对比,发现getters中的方法和组件中的过滤器比较类似,因为过滤器和getters都没有修改元数据
    // 都是把元数据做了一层包装,提供给调用者
    //其次getters也和computed比较像,只要state中数据发生变化了,那么,如果getters正好引用这个数据,就会触发getters重新求值
    
  }

1.如果需要修改,必须提调用mutations中统一定义的方法来进行修改

2.如果store中state上的数据,在对外提供的时候,需要做一层包装,那么,推荐使用getters如果需要getters的方法则使用this.$store.***调用

getters里面的方法是相当于监听,只要state里面的数据改变就会计算一次,相当于计算属性,computed

当购物车的数据,更新后,存在localstorage里面,做刷新不重置

webpack 打包

ngrok 映射外网

上一篇 下一篇

猜你喜欢

热点阅读