Vue系统指令

• {{}}:插值表达式

    作用:将vue对象中的数据以及表达式显示到vue托管区域中
    
    {{这里书写vue对象中data里面的数据或者表达式}}

• v-cloak:解决表达式闪烁问题

    1. 定义一个样式
    <style>
      [v-cloak]{
          display:none
      }
    </style>

    2. 使用
    
    <div v-cloak>{{name}}</div>

    原理:当vue.js文件还没有加载出来时 使用[v-cloak]样式作用于当前指令所在标签,当vue.js能够起作用时,会自动删除v-cloak指令

• v-text:输出文本数据

    <span v-text='name'></span>

• v-html:输出HTML结构数据

    <div v-html='name'></div>

    data：{
        name：'<span>zs</span>'
    }

• v-bind:动态给标签或者组件绑定属性

    <div v-bind:class = 'cls'></div>
    // 使用:简写v-bind
    <div :class = 'cls'></div>
       
    // 变量和常量组合
    <a :href="'http://www.baidu.com/index/' + id">跳转</a>
    
    data：{
        cls: 'red blue',
        id: 1
    }

• v-on:绑定事件

    <div v-on:click = 'show'></div>
    // 简写
    <div @click = 'show'></div>
    
    methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
        show: function () {
          alert('Hello')
        }
    }

• v-model：双向数据绑定

    // 可以使用的标签:input textarea select 组件
    <input v-model='name'></input>
    
    // name会和表单元素的value进行关联 value值变化 name值变化 反过来name值发生变化 value值也会发生变化

• v-for:循环输出HTML元素

    <div v-for='(item,index) in list' :key = 'index'>{{item.name}}</div>

• v-if：根据表达式值的真假决定元素的显示隐藏

    // isShow为true显示div 为false隐藏div
    // v-if是直接操作DOM 即隐藏时会将该div从DOM结构中移除
    <div v-if='isShow'></div>

• v-show: 根据表达式值的真假决定元素的显示隐藏

    // isShow为true显示div 为false隐藏div
    // v-show是操作div的样式 显示时添加 style = 'display:block'; 隐藏时添加style = 'display:none'
    <div v-if='isShow'></div>

    v-if 是删除DOM元素 效率比较低 会造成页面的结构重新绘制
    v-show 是控制样式 只会改变当前这一个元素的样式 不会造成页面结构的重新绘制

在Vue中使用样式

使用class样式

1. 数组

<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>

2. 数组中使用三元表达式

<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>

3. 数组中嵌套对象

<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>

4. 直接使用对象

<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>

使用内联样式

1. 直接在元素上通过 :style 的形式，书写样式对象

<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>

2. 将样式对象，定义到 data 中，并直接引用到 :style 中

• 在data上定义样式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}

• 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="h1StyleObj">这是一个善良的H1</h1>

3. 在 :style 中通过数组，引用多个 data 上的样式对象

• 在data上定义样式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
}

• 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>

过滤器

 `过滤器`:对需要展示的数据进行加工处理后再展示到界面，并不会 
  改变原数据
  使用方法：原始数据 | 过滤器名称(参数)

自定义指令

指令: 其实就是Vue给我们提供的操作DOM元素的一些方法

• 全局指令

Vue.directive('指令名称',{
    // 指令第一次绑定到元素身上时执行(在内存中绑定到了DOM对象上边)
    bind:function(el,binding,VNode){
        // el: 指令所在的DOM元素对象
        // binging.value 指令等号右边表达式的值
        // binging.expression 指令等号右边表达式
        // VNode.context 当前指令所在托管区域对于的Vue实例对象
    },
    // 当前指令所在元素插入到父节点时调用(不保证DOM已经渲染完毕)
    inserted:function(){},
    // 指令绑定的值发生变化时会去执行
    update:function(){},
    // 指令所在的组件值更新完毕时调用
    componentUpdated:function(){},
    // 自定义指令从当前元素解绑时调用
    unbind:function(){}
})

• 私有指令

new Vue({
    el:'#app',
    // 私有指令
    directives:{
        '指令名称':{
            bind:function(el,binding){

            }
        }
    },
    // 私有过滤器
    filters:{
        '过滤器的名称':function(value){
            return 处理完毕的数据
        }
    }
})

生命周期钩子函数

钩子函数: 一个应用程序或者框架内部提前定义好的一批函数,这些函数会在特定的时间段自动执行

生命周期: 一个程序会存在初始化 - 运行 - 销毁等阶段,这些阶段统称为该程序的生命周期

new Vue({
    el:'#app',
    data:{},
    methods:{},
    beforeCreated(){},
    // data中的数据和methods中的方法已经初始化完毕会去自动执行created方法
    created(){
        // 用于发生数据请求,也可以初始化一些数据
    },
    beforeMount(){},
    // 真实DOM已经渲染完毕会执行mounted函数
    mounted(){
        // 操作真实DOM
    }
    beforeUpdate(){},
    // data中的发生了变化而且被重新渲染到了界面上时才会执行
    updated(){
        // 数据更新后重新操作DOM
    },
    // 实例销毁之前,实例上面的各种属性和方法都还可以正常访问,通常可以在这里手动回收一些页面没有被释放的变量,比如清楚定时器的操作。
    beforeDestroy(){},
    // 实例已经从内存中被销毁
    destroyed(){}
})

组件之间的传值

父子组件传值

父向子传值

// 1. 先在父组件中定义好要传递的数据
new Vue({
    el:'#app'
    data:{
        msg:'我是要传递给子组件的数据'
    },
    components:{
        son:{
            template:'<div>我是子组件{{message}}</div>',
            props:['message']
        }
    }
})

// 2. 在父组件中使用子组件的时候,用绑定属性的方式将父组件中的数据传递给子组件
<div id='app'>
    <son v-bind:message = 'msg'></son>
</div>

// 3. 在子组件中定义一个props属性,该属性是一个数组,数组中定义用于接收传过来的变量。这个变量
// 和第二步绑定的这个属性同名
son:{
    template:'<div>我是子组件</div>',
    props:['message']
}

子向父传值

发布订阅者 设计模式

// 1. 定义好父子组件,定义好子组件需要传递给父组件的数据
new Vue({
    el:'#app'
    components:{
        son:{
            template:'<div>我是子组件{{message}}</div>',
            data:function(){
                return {
                    msg:'传给父组件的数据'
                }
            }
        }
    }
})

// 2. 在子组件中使用this.$emit触发一个自定义的方法名,然后传递数据
// 第一个参数就是自定义的方法名
// 第二个参数就是需要传递给父组件的数据
this.$emit('func',this.msg)

// 3. 在父组件中使用子组件时,绑定一个事件,事件名称和子组件触发的方法名同名
<div id='app'>
    <son @func = 'getmsg'></son>
</div>

// 4. 在父组件的methods中定义一个事件处理函数
methods:{
    getmsg:function(data){
        // data就是子组件传过来的数据
    }
}

ref获取DOM和组件对象

// 1. 在DOM元素或者组件上面绑定ref属性
<div ref='mydiv'>我是一个div</div>
<com ref = 'mycom'></com>
// 2. 使用this.$refs.属性值获取对象引用
this.$refs.mydiv // DOM对象
this.$refs.mycom // 组件对象

vue-router路由

前端路由: 浏览器对前端页面实现的跳转方式,一般只在单页应用(SPA)程序中出现

router route routes 的区别是?

• router: 是Vue实例内部的一个属性,是专门用来挂载vue-router对象的
• route: 表示routers内部的每一个路由对象的引用
• routes: 是Vue-Router实例内部的一个属性,是用来保存所有的路由规则

基本使用步骤

1. 创建路由对象并配置路由规则
// 1.1 创建组件模板对象
var login = {
    template:'<div>登录</div>'
}
var register = {
    template:'<div>注册</div>'
}
// 1.2 创建路由对象并配置路由规则
var router1 = new VueRouter({
    // routes用来存放路由规则,每个路由规则都是一个对象
    routes:[
        // path: 页面#后面的地址
        // component 需要显示的组件对象
        {path:'/',redirect:'/login'},
        {path:'/login',component:login},
        {path:'/register',component:register}
    ]
})

// 1.3 将创建处理的路由对象和Vue进行绑定
new Vue({
    el:'#app',
    // 将vuerouter对象注册到Vue内部,以保证在托管区域中科院使用VueRouter内部提供的组件以及其他属性和方法
    router:router1
})

2. 使用<router-view>进行占位
<div id='app'>  
    <router-view></router-view>
<div>

3. 使用<router-link>设置跳转路径
<router-link to='/login'>登录</router-link>

redirect重定向

在路由规则中配置redirect属性可以使路由进行内部切换,当访问path中的路径时,会默认跳转到redirect中指定的路径去。

{path:'/',redirect:'/login'} // 当访问根路径时,会默认跳转到login路径中

路由传参

query传参

// 1. 在跳转路径后面使用查询字符串拼接参数
<router-link to = '/login?name=zs$age=18'>登录</router-link>

// 2. 在路由对应的组件内部使用`this.$route.query`获取参数
this.$route.query.name // zs
this.$route.query.id // 18

params传参

// 1. 更改路由规则用于匹配参数
new VueRouter({
    routes:[
        // :id用于匹配/login/13后面的参数13
        {path:'/login/:id',component:login}
    ]
})
// 2. 在跳转路径后面使用/拼接参数
<router-link to = '/login/13'>登录</router-link>

// 3. 在路由对应组件内部使用`this.$route.params`获取参数
var login = {
    template:'<div>登录组件{{this.$route.params.id}}</div>',
    created(){
        console.log(this.$route.params.id) // 获取到的就是13
    }
}

嵌套路由

// 1. 在父路由内部使用children属性配置子路由规则,子路由规则对象中的path属性不要 '/' 
// 2. 在父路由规则对应的组件模板中添加router-view用于显示子路由规则对应的组件
// 3. 在<router-link>中设置跳转路径(将父路由和子路由的path拼接)

路由命名视图

给<router-view>添加name属性,用于指定显示哪一个组件

// 1. 将路由规则对象中的component改为components,表示一个路由规则下可以显示多个组件,每一个组件用一个名称对应起来,默认显示的组件用default对应
new VueRouter({
    routes:[
        // components对象内部按照 名称 - 组件对象的方式定义
        {path:'/',components:{
            'default': header,
            'left': leftBox,
            'main': mainBox
        }}
    ]
})

// 2. 给<router-view>添加name属性指定显示哪一个组件
<router-view></router-view>  // 不指定默认显示default对应的组件
<router-view name = 'left'></router-view> // 显示leftBox组件
<router-view name = 'main'></router-view> // 显示mainBox组件

watch的使用

watch: 用于监听data中定义的数据的变化,只要被监听的数据发生了变化,就会执行对应的处理函数

watch监视数据变化

new Vue({
    el:'#app',
    data:{
        msg:'hello'
    },
    watch:{
        'msg': function(newVal,oldVal){
            // newVal 表示变化后的值 oldVal 表示变化前的值
            // 只要data中定义的msg发生了改变,就会执行这个函数
        }
    }
})

watch监视路由变化

通过监听$route.path可以监视到路由地址的变化

new Vue({
    el:'#app',
    watch:{
        '$route.path': function(newVal,oldVal){
           // newVal 新跳转的路由地址
           // oldVal 跳转之前的路由地址
        }
    }
})

computed计算属性

computed:计算属性,是指在computed对象中定义属性,属性的值是该属性后面函数的返回值,而且函数内部如果用到了data中定义的其他数据,只要这些数据发生了变化,都会重新触发函数的执行,计算属性的值也会发生变化。

new Vue({
    el:'#app',
    data:{
        msg:'hello'
    },
    computed:{
        'info': function(){
            // 只要msg发生了变化,会重新触发该函数的执行
            // info的值就是函数的返回值
           return this.msg + 'world'
        }
    },
    methods:{},
    watch:{}
})

watch 和 computed计算属性的区别

watch可以对data中申明过的数据进行监视,只要被监视的数据发生了变化,就会触发对应函数

computed定义计算属性,定义的属性和在data中定义的使用方式一样,但是computed中的属性值是对应函数的返回值,只要函数中依赖的其他数据发生了变化,会重新计算返回值

data、props、computed的区别

data中的相当于申明变量,可以直接赋值也可以随后赋值

props中数据是从其他组件传递得到

computed中的数据是通过计算得到,是属性对应函数的返回值,计算结果会被缓存

• npm: node package manager node包管理工具

• nrm: node registry manager node 镜像地址管理工具

• nvm: node version manager node 版本管理工具

--save和--save-dev

// 项目开发期间需要安装的依赖
// --save-dev 会将安装的包名以及版本号记录到package.json文件中的devDependencies节点中
npm install webpack --save-dev 等价于 npm install webpack -D

// 项目上线后需要安装的依赖
// --save 会将安装的包名以及版本号记录到package.json文件中的dependencies节点中
npm i webpack --save 等价于 npm i webpack -S

npm i 会将所有在package.json文件中的devDependencies节点和dependencies节点内所有的依赖包全部安装一遍
npm i --save-dev 只会下载devDependencies中的所有依赖包
npm i --save 只会下载dependencies中的所有依赖包

// 为什么安装包的时候要区分 --save 和 --save-dev
// 1. 使项目的阅读更加友好，便于理解项目结构
// 2. 安装对应阶段的包时更加方便

npm i cnpm -g

cnpm 

yarn的使用

// 1. 使用npm全局安装yarn
npm i yarn -g

// 2. 初始化命令
yarn init -y

// 3. 安装包
yarn add package-name // 会将安装的包记录到dependencies节点里面
yarn add package-name --dev // 会将安装的包记录到devDependencies节点里面

yarn global add package-name // 安装全局包

// 4. 删除包
yarn remove package-name

// 5. 执行命令
yarn run dev

yarn global bin 查看全局包安装的路径