【Vue】Vue2.0+Vue3.0学习笔记day07

最新推荐文章于 2024-07-22 08:55:10 发布

西西歪歪西歪

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量569

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_58214412/article/details/122363163

版权

Vue 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

061.创建脚手架

Vue脚手架是官方提供的标准化开发工具（开发平台）

文档接口

第一步（仅第一次执行）：全局安装@vue/cli

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxx   xxx为项目名称

第三步：启动项目

npm run serve

备注：

1.如出现下载缓慢请配置npm淘宝镜像

npm config set registry https://registry.npm.taobao.org

2.Vue 脚手架隐藏了所有webpack相关的配置，若想查看具体的webpakc配置，请执行

vue inspect > output.js

3.使用nmp的前提是已经安装了nood.js

062.分析脚手架结构

## 脚手架文件结构：
   |——node_modules
   |——public
   |   |——favicon.ico 页签图标
   |   |——index.html  主页面
   |——src
   |   |——assets 存放静态资源
   |   |——logo.png
   |   |——components 存放组件
   |   |——HelloWorld.vue
   |   |——App.vue 汇总所有组件
   |   |——main.js 入口文件
   |——.gitignore Git版本管制忽略的配置
   |——babel.config.js babel的配置文件
   |——package-lock.json 包版本控制文件
   |——package.json 应用配置包
   |——README.md 应用描述文件

063.render函数

/* 
  该文件是整个项目的入口文件
 */
// 引入vue
import Vue from 'vue'
// 引入App组件，它是所有组件的父组件
import App from './App.vue'
// 关闭vue的生产提示
Vue.config.productionTip = false
// 创建vue的实例对象--vm
new Vue({
  // 将App组件放入容器中
  render: h => h(App),
}).$mount('#app')

/* 
  关于不同版本的Vue：
     1.Vue.js与Vue.runtime.xxx.js的区别：
        1 Vue.js是完整版的Vue，包含：核心功能+模板解析器
        2 Vue.runtime.xxx.js是运行版的Vue，只包含：核心功能，没有模板解析器
     2.因为Vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，
       需要使用render函数接收到的createElement函数去指定具体内容  
*/

064.修改默认配置

## vue.config.js配置文件
   使用vue inspect > output.js可以查看到vue脚手架的默认配置
   使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

红框里的默认配置不能改

065.ref属性

School.vue

<template>
    <div class="demo">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>         
    </div>
</template>

<script>
    export default {
        name:'School',
        data(){
            return{
                name: '西西歪',
                address: '广州'
            }
        },        
    }
</script>

<style>
    .demo{
        background-color: olive;
    }
</style>

App.vue

<template>
    <div>
        <h1 v-text="msg" ref="title"></h1>
        <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
        <School ref="sch"/>
    </div>
</template>

<script>
    import School from "./components/School.vue";
    export default {
        name:'App',
        components:{
            School
        },
        data() {
            return {
                msg:'欢迎学习vue'
            }
        },       
        methods: {
            showDOM(){
                console.log(this.$refs.title);//真实DOM元素
                console.log(this.$refs.btn);//真实DOM元素
                console.log(this.$refs.sch);//School组件的实例对象vc
            }
        },
    }
</script>

<style>

</style>

main.js

// 引入vue
import Vue from 'vue'
// 引入App组件，它是所有组件的父组件
import App from './App.vue'
// 关闭vue的生产提示
Vue.config.productionTip = false
// 创建vue的实例对象--vm
new Vue({
  // 将App组件放入容器中
  render: h => h(App),
}).$mount('#app')

## ref属性
   1.被用来给元素或子组件注册引用信息（id的替代者）
   2.应用在HTML标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc)
   3.使用方式：
      打标识：<h1 ref="xxx">...</h1> 或<School ref="xxx"></School>
      获取：this.$refs.xxx

066.props配置

## 配置项props
   功能：
      1.传递数据：<Student name="xxx"/>
      2.接收数据：
         第一种方式（只接收）：
            props：['name']
         第二种方式（限制类型）：
            props:{
               name:String
            }
         第三种方式（限制类型、限制必要性、指定默认值）：
            props:{
               name:{
                  type:String,//类型
                  required:true,//必要性
                  default:'老王'//默认值
               }
            }
   备注：props是只读的，vue底层会监测你对props的修改，如果进行了修改就会发出警告
         若业务需求修改数据，那么请复制props的内容到data中，然后去修改data中的数据

Student.vue

<template>
    <div class="demo">
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>         
        <h2>学生年龄：{{myAge+1}}</h2> 
        <button @click="updateAge">点击修改收到的年龄</button>        
    </div>
</template>

<script>
    export default {
        name:'Student',
        data(){
            return{
                msg:'我是法外狂徒',
                myAge:this.age
            }
        },
        methods: {
            updateAge(){
                this.myAge++
            }
        }, 
        // 简单接收
        // props:['name','age','sex']
        // 接收的同时对数据进行类型限制
      /*   props:{
            name:String,
            age:Number,
            sex:String
        }, */
        // 接收的同时对数据进行类型限制+必要性的限制
        props:{
            name:{
                type:String, //name的类型是字符串
                required:true  //name是必须的
            },
            sex:{
                type:Number,
                default:99 //默认值
            },
             age:{
                type:String,
                required:true
            },
        }   
    }
</script>

App.vue

<template>
    <div>
        <Student name="李四" :age="19" sex="女"/>
    </div>
</template>

<script>
    import Student from "./components/Student.vue";
    export default {
        name:'App',
        components:{
            Student
        },       

    }
</script>

<style>

</style>

067.mixin混入

## mixin(混入)
   功能：可以把多个组件共用的配置提取成一个混入的对象
   使用方式：
      第一步定义混合
         {
            data(){....},
            methods{....}
            ...
         }
      第二步使用混合
         1.全局混入：Vue.mixin(xxx)
         2.局部混入：mixin:[xxx]

新建mixin.js文件

export const mixin ={
    methods: {
        showName(){
            alert(this.name)
        }
    },
}

export const mixin1 ={
    data() {
        return {
            x:100,
            y:200
        }
    },
}

<template>
    <div>
        <h2 @click="showName">学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>             
    </div>
</template>

<script>
    import { mixin,mixin1 } from "../mixin";
    export default {
        name:'School',
        data(){
            return{
                name:'西西歪',
                address:'广州'
            }
        },
       mixins:[mixin,mixin1]
    }
</script>

<template>
    <div>
        <h2 @click="showName">学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>             
    </div>
</template>

<script>
    import { mixin,mixin1 } from "../mixin";
    export default {
        name:'Student',
        data(){
            return{
                name:'张三',
                sex:'男',
                x:666
            }
        },
        mixins:[mixin,mixin1]
    }
</script>

068.插件

## 插件
   功能：用于增强vue
   本质：包含install方法的一个对象，install的第一个参数是vue，
   第二个以后的参数是插件使用者传递的数据。
   定义插件：
      对象.install = function (Vue,options) {
         // 全局过滤器
        Vue.filter(...)
         // 定义全局指令
        Vue.directive(...)
        .....
   }
   使用插件： Vue.use()

新建插件文件plugins.js

export default{
    install(Vue){
        // 全局过滤器
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        })

        // 定义全局指令
        Vue.directive('fbind',{
            // 指令与元素成功绑定时（一上来）
            bind(element,binding){
                element.value=binding.value
            },
            // 指令所在元素被插入页面时
            inserted(element){
                // 获取焦点
                element.focus()
            },
            // 指令所在的模板被重新解析时
            update(element,binding){
                element.value=binding.value
            }
        })

        // 定义混入
        Vue.mixin({
            data() {
                return {
                    x:100,
                    y:200
                }
            },
        })

        // 给vue原型上添加一个方法（vm和vc都能用）
        Vue.prototype.hello= ()=>{alert('你好啊')}
    }
}

在main.js中全局引入使用

// 引入vue
import Vue from 'vue'
// 引入App组件，它是所有组件的父组件
import App from './App.vue'

// 引入插件
import plugins from './plugins'
// 关闭vue的生产提示
Vue.config.productionTip = false

// 使用插件
Vue.use(plugins)
// 创建vue的实例对象--vm
new Vue({
  // 将App组件放入容器中
  render: h => h(App),
}).$mount('#app')

在school中

<template>
    <div>
        <h2>学校名称：{{name |mySlice}}</h2>
        <h2>学校地址：{{address}}</h2>  
        <input type="text" v-fbind:value="name">   
        <button @click="test">点我测试一个hello方法</button>    
    </div>
</template>

<script>
    export default {
        name:'School',
        data(){
            return{
                name:'西西歪hello',
                address:'广州'
            }
        },
        methods:{
            test(){
                this.hello()
            }
        }
    }
</script>

069.scoped样式

## scoped样式
   作用：让样式局部生效，防止冲突
   写法：<style scoped>
   一般在App.vue里设置全局的样式，不写scoped

<template>
    <div class="demo">
        <h2>学校名称：{{name}}</h2>
        <h2 class="dizi">学校地址：{{address}}</h2>    
    </div>
</template>

<script>
    export default {
        name:'School',
        data(){
            return{
                name:'西西歪',
                address:'广州'
            }
        },
    }
</script>

/*lang的种类有css,less, scss等，css是默认的可以不写lang,用其他的要安装相应的依赖 */
<style lang="less" scoped>
   .demo{
       background-color: red;
       .dizi{
           font-size: 40px;
       }
   } 
</style>

<template>
    <div class="demo">
        <h2 class="title">学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>             
    </div>
</template>

<script>
    export default {
        name:'Student',
        data(){
            return{
                name:'张三',
                sex:'男',
            }
        },
    }
</script>

<style scoped>
.demo{
    background-color: orange;
}
</style>

<template>
    <div>
        <Student/>
        <hr>
        <School></School>
    </div>
</template>

<script>
    import Student from "./components/Student.vue";
    import School from "./components/School.vue";
    export default {
        name:'App',
        components:{
            Student,
            School
        },       

    }
</script>

<style>
.title{
    color: #fff;
}
</style>

西西歪歪西歪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue】Vue2.0+Vue3.0学习笔记day07

061.创建脚手架Vue脚手架是官方提供的标准化开发工具（开发平台）062.分析脚手架结构063.render函数064.修改默认配置065.ref属性066.props配置067.mixin混入068.插件0.69scoped样式
复制链接

扫一扫

专栏目录