美文网首页
vue 基础语法

vue 基础语法

作者: 梁庄十年 | 来源:发表于2019-04-21 10:46 被阅读0次

    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>
    
    1. 数组中使用三元表达式
    <h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>
    
    1. 数组中嵌套对象
    <h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>
    
    1. 直接使用对象
    <h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>
    

    使用内联样式

    1. 直接在元素上通过 :style 的形式,书写样式对象
    <h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
    
    1. 将样式对象,定义到 data 中,并直接引用到 :style
    • 在data上定义样式:
    data: {
            h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
    }
    
    • 在元素中,通过属性绑定的形式,将样式对象应用到元素中:
    <h1 :style="h1StyleObj">这是一个善良的H1</h1>
    
    1. :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 查看全局包安装的路径
    

    相关文章

      网友评论

          本文标题:vue 基础语法

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