首页 > 其他分享 >vue基础教程

vue基础教程

时间：2023-07-08 12:14:10浏览次数：40  
标签：vue DOM vm value Vue 基础教程 组件 data

vue基础教程

英文官网

中文官网

渐进式JavaScript框架

作者: 尤雨溪

特点

  • 遵循MVVM
  • 编码简洁, 体积小, 运行效率高, 适合移动/PC端开发
  • 它本身只关注UI, 也可以引入其它第三方库开发
  • 借鉴Angular的模板和数据绑定技术
  • 借鉴React的组件化和虚拟DOM技术

Vue周边库

  1. vue-cli: vue 脚手架
  2. vue-resource
  3. axios
  4. vue-router: 路由
  5. vuex: 状态管理
  6. element-ui: 基于vue的UI组件库(PC端)

环境准备

可以参考官方文档

快速入门

按照惯例写一个Hello World

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello Vue</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../xx/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="demo">
            <h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
        </div>
        <script type="text/javascript" >
            Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

            //创建Vue实例
            new Vue({
                el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
                data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
                    name:'vue',
                    address:'深圳'
                }
            })
        </script>
    </body>
</html>

MVVM模型

vue的灵感来自MVVM模型，可以按如下图方式理解

vue-1

说明：

  • M：模型(Model) ：data中的数据
  • V：视图(View) ：模板代码
  • VM：视图模型(ViewModel)：Vue实例

模板语法

模板语法官方网文档

Vue使用一种基于HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上。所有的Vue模板都是语法层面合法的HTML，可以被符合规范的浏览器和 HTML解析器解析。

在底层机制中，Vue会将模板编译成高度优化的JavaScript代码。结合响应式系统，当应用状态变更时，Vue能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的DOM操作。

Vue模板语法有2大类：

  1. 插值语法：
    • 功能：用于解析标签体内容。
    • 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
  2. 指令语法：
    • 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
    • 举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
    • 备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子

数据绑定

  1. 单向绑定(v-bind)：数据只能从data流向页面
  2. 双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data
  1. 双向绑定一般都应用在表单类元素上（如：input、select等）
  2. v-model:value可以简写为v-model，因为v-model默认收集的就是value值
<input type="text" v-model="name"><br/>

数据代理

底层原理Object.defineProperty方法

  • Vue中的数据代理：

    通过vm对象来代理data对象中属性的操作（读/写）

  • Vue中数据代理的好处：

    更加方便的操作data中的数据

  • 基本原理：

    通过Object.defineProperty()把data对象中所有属性添加到vm上
    为每一个添加到vm上的属性，都指定一个getter/setter
    在getter/setter内部去操作（读/写）data中对应的属性

let person = {
    name:'张三',
    sex:'男',
}
let age = 18

Object.defineProperty(person,'age',{
    // enumerable:true, //控制属性是否可以枚举，默认值是false
    // writable:true, //控制属性是否可以被修改，默认值是false
    // configurable:true //控制属性是否可以被删除，默认值是false

    //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
    get(){
        console.log('有人读取age属性了')
        return age
    },

    //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
    set(value){
        console.log('有人修改了age属性，且值是', value)
        age = value
    }
})

事件处理

  1. 使用v-on:xxx或@xxx绑定事件，其中xxx是事件名
  2. 事件的回调需要配置在methods对象中，最终会在vm上
  3. methods中配置的函数，不要用箭头函数！否则this就不是vm了
  4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
  5. @click="demo"和@click="demo($event)"效果一致，但后者可以传参

Vue中的事件修饰符

  1. prevent：阻止默认事件（常用）
  2. stop：阻止事件冒泡（常用）
  3. once：事件只触发一次（常用）
  4. capture：使用事件的捕获模式
  5. self：只有event.target是当前操作的元素时才触发事件
  6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕

键盘事件

  • Vue中常用的按键别名

    回车 => enter
    删除 => delete (捕获“删除”和“退格”键)
    退出 => esc
    空格 => space
    换行 => tab (特殊，必须配合keydown去使用)
    上 => up
    下 => down
    左 => left
    右 => right

  • Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

  • 系统修饰键（用法特殊）：ctrl、alt、shift、meta

    1. 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发，例如@keydown.ctrl.y
    2. 配合keydown使用：正常触发事件

  • 也可以使用keyCode去指定具体的按键（不推荐）

  • Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

计算属性

  1. 定义：要用的属性不存在，要通过已有属性计算得来
  2. 原理：底层借助了Objcet.defineproperty方法提供的getter和setter
  3. get函数什么时候执行
    • 初次读取时会执行一次
    • 当依赖的数据发生改变时会被再次调用
  4. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
  5. 备注：
    • 计算属性最终会出现在vm上，直接读取使用即可
    • 如果计算属性要被修改，那必须写setter函数去响应修改，且setter中要引起计算时依赖的数据发生改变

示例代码:

new Vue({
    el:'#root',
    data:{
        firstName:'张',
        lastName:'三',
    },
    computed:{
        fullName:{ 
            // fullName是计算属性最完整的写法
            //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
            //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
            get(){
                console.log('get被调用了')
                // console.log(this) //此处的this是vm
                return this.firstName + '-' + this.lastName
            },
            //set什么时候调用? 当fullName被修改时。
            set(value){
                console.log('set',value)
                const arr = value.split('-')
                this.firstName = arr[0]
                this.lastName = arr[1]
            }
        },
        // fullName(){
        //     // fullName是计算属性的简写形式，是一个方法，相当于完整写法的get方法
        //     console.log('get被调用了')
        //     return this.firstName + '-' + this.lastName
        // }
    }
})

监视属性watch

  1. 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
  2. 监视的属性必须存在，才能进行监视！！
  3. 监视的两种写法：
    • new Vue时传入watch配置
    • 通过vm.$watch监视

示例代码:

const vm = new Vue({
    el:'#root',
    data:{
        isHot:true,
    },
    // new Vue时传入watch配置
    watch:{
        isHot:{
            immediate: false, //true:初始化时让handler调用一下, false:初始化时不调用handler
            //handler什么时候调用？当isHot发生改变时。
            handler(newValue, oldValue){
                console.log('isHot被修改了', newValue, oldValue)
            }
        }
        // 简写方式，直接是一个函数
        // isHot(newValue, oldValue){
        //     console.log('isHot被修改了',newValue,oldValue,this)
        // }
    }

})

// 通过vm.$watch监视
vm.$watch('isHot',{
    immediate: true, //初始化时让handler调用一下
    //handler什么时候调用？当isHot发生改变时。
    handler(newValue, oldValue){
        console.log('isHot被修改了,by$watch', newValue, oldValue)
    }
})

深度监视

  • Vue中的watch默认不监测对象内部值的改变（一层）
  • 配置deep:true可以监测对象内部值改变（多层）
  • 使用watch时根据数据的具体结构，决定是否采用深度监视

示例代码：

const vm = new Vue({
    el: '#root',
    data: {
        isHot: true,
        numbers: {
            a: 1,
            b: 1,
            c: {
                d: {
                    e: 100
                }
            }
        }
    },
    methods: {
        changeWeather() {
            // 修改属性
            this.isHot = !this.isHot
        }
    },
    watch: {
        isHot: {
            // immediate: true, //初始化时让handler调用一下
            //handler什么时候调用？当isHot发生改变时。
            handler(newValue, oldValue) {
                console.log('isHot被修改了', newValue, oldValue)
            }
        },
        //监视多级结构中某个属性的变化
        /* 'numbers.a':{
         handler(){
          console.log('a被改变了')
         }
        } */

        //监视多级结构中所有属性的变化
        numbers: {
            // deep:true 可以监测对象内部值改变
            deep: true,
            handler() {
                console.log('numbers改变了')
            }
        }
    }
})

总结计算属性与检测属性

  • computed和watch之间的区别：
    1. computed能完成的功能，watch都可以完成
    2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
  • 两个重要的小原则：
    1. 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
    2. 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象

绑定样式

  • class样式

    写法:class="xxx" xxx可以是字符串、对象、数组

    1. 字符串写法适用于：类名不确定，要动态获取
    2. 数组写法适用于：要绑定多个样式，个数不确定，类名不确定
    3. 对象写法适用于：要绑定多个样式，个数确定（属性个数），类名称确定（属性名称），但不确定用不用（属性值true,false）

  • style样式

    1. :style="{fontSize: xxx}"其中xxx是动态值。
    2. :style="[a,b]"其中a、b是样式对象。

示例：

css

.basic{
    width: 400px;
    height: 100px;
    border: 1px solid black;
}
   
.happy{
    border: 4px solid red;;
    background-color: rgba(255, 255, 0, 0.644);
    background: linear-gradient(30deg,yellow,pink,orange,yellow);
}

.sad{
    border: 4px dashed rgb(2, 197, 2);
    background-color: gray;
}

.normal{
    background-color: skyblue;
}

.test1{
    background-color: yellowgreen;
}

.test2{
    font-size: 30px;
    text-shadow:2px 2px 10px red;
}

.test3{
    border-radius: 20px;
}

html结构

<div id="root">
    <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

    <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、样式的类名不确定 -->
    <div class="basic" :class="classArr">{{name}}</div> <br/><br/>

    <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、样式的类名也确定，但要动态决定用不用 -->
    <div class="basic" :class="classObj">{{name}}</div> <br/><br/>

    <!-- 绑定style样式--对象写法 -->
    <div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
    <!-- 绑定style样式--数组写法 -->
    <div class="basic" :style="styleArr">{{name}}</div>
</div>

vm实例

const vm = new Vue({
    el: '#root',
    data: {
        name: '样式渲染',
        mood: 'normal',
        classArr: ['test1', 'test2', 'test3'],
        classObj: {
            test1: false,
            test2: false,
        },
        styleObj: {
            fontSize: '40px',
            color: 'red',
        },
        styleObj2: {
            backgroundColor: 'orange'
        },
        styleArr: [
            {
                fontSize: '40px',
                color: 'blue',
            },
            {
                backgroundColor: 'gray'
            }
        ]
    },
    methods: {
        changeMood() {
            const arr = ['happy', 'sad', 'normal']
            const index = Math.floor(Math.random() * 3)
            this.mood = arr[index]
        }
    },
})

条件渲染

  • v-if

    • 写法

        <div v-if="n === 1">Angular</div>
  <div v-else-if="n === 2">React</div>
  <div v-else-if="n === 3">Vue</div>
  <div v-else>哈哈</div>

    • 适用于：切换频率较低的场景

    • 特点：不展示的DOM元素直接被移除

    • 注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被"打断"

  • v-show

    • 写法：v-show="表达式"

      <h2 v-show="false">欢迎来到{{name}}</h2>
<h2 v-show="1 === 1">欢迎来到{{name}}</h2>

    • 适用于：切换频率较高的场景

    • 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

  • 备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到

v-for指令

  • 用于展示列表数据
  • 语法：v-for="(item, index) in xxx" :key="yyy"
  • 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
<!-- 遍历数组 -->
<h2>人员列表（遍历数组）</h2>
<ul>
    <li v-for="(p,index) of persons" :key="index">
        {{p.name}}-{{p.age}}
    </li>
</ul>

<!-- 遍历对象 -->
<h2>汽车信息（遍历对象）</h2>
<ul>
    <li v-for="(value, k) of car" :key="k">
        {{k}}-{{value}}
    </li>
</ul>

<!-- 遍历字符串 -->
<h2>测试遍历字符串（用得少）</h2>
<ul>
    <li v-for="(char, index) of str" :key="index">
        {{char}}-{{index}}
    </li>
</ul>

<!-- 遍历指定次数 -->
<h2>测试遍历指定次数（用得少）</h2>
<ul>
    <li v-for="(number, index) of 5" :key="index">
        {{index}}-{{number}}
    </li>
</ul>

key的内部原理

react、vue中的key有什么作用？（key的内部原理）

  1. 虚拟DOM中key的作用：

    key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】
    随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较

  2. 对比规则：

    1. 旧虚拟DOM中找到了与新虚拟DOM相同的key
    2. 若虚拟DOM中内容没变，直接使用之前的真实DOM
    3. 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
    4. 旧虚拟DOM中未找到与新虚拟DOM相同的key
    5. 创建新的真实DOM，随后渲染到到页面

  3. 用index作为key可能会引发的问题：

    • 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
      • 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低
    • 如果结构中还包含输入类的DOM：
      • 会产生错误DOM更新 ==> 界面有问题

  4. 开发中如何选择key:

    最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值

    如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示, 使用index作为key是没有问题的

Vue监视数据的原理

  • vue会监视data中所有层次的数据

  • 如何监测对象中的数据

    通过setter实现监视，且要在new Vue时就传入要监测的数据

    • 对象中后追加的属性，Vue默认不做响应式处理
    • 如需给后添加的属性做响应式，请使用如下API
      1. Vue.set(target, propertyName/arrayIndex, value)
      2. vm.$set(target, propertyName/index, value)

  • 如何监测数组中的数据

    通过包裹数组更新元素的方法实现，本质就是做了两件事

    1. 调用原生对应的方法对数组进行更新
    2. 重新解析模板，进而更新页面

  • 在Vue修改数组中的某个元素一定要用如下方法

    • 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
    • Vue.set()或vm.$set()

  • 特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性

模拟数据监测代码

let data = {
    name: '我是vue',
    address: '北京',
}

// 创建一个监视的实例对象，用于监视data中属性的变化
const obs = new Observer(data)
console.log(obs)

//准备一个vm实例对象
let vm = {}
vm._data = data = obs

function Observer(obj) {
    //汇总对象中所有的属性形成一个数组
    const keys = Object.keys(obj)
    //遍历
    keys.forEach((k) => {
        Object.defineProperty(this, k, {
            get() {
                return obj[k]
            },
            set(val) {
                console.log(`${k}被改了,我要去解析模板,生成虚拟DOM.....我要开始忙了`)
                obj[k] = val
            }
        })
    })
}

收集表单数据

  • 若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
  • 若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
  • 若：<input type="checkbox"/>
    1. 没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值）
    2. 配置input的value属性:
      • v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值）
      • v-model的初始值是数组，那么收集的的就是value组成的数组
  • 备注：v-model的三个修饰符：
    1. lazy：失去焦点再收集数据
    2. number：输入字符串转为有效的数字
    3. trim：输入首尾空格过滤

过滤器

  • 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）

  • 语法

    • 注册过滤器：Vue.filter(name, callback)或new Vue{filters:{}}
    • 使用过滤器：{{ xxx | 过滤器1 | 过滤器2}}或v-bind:属性 = "xxx | 过滤器名"

  • 备注

    过滤器也可以接收额外参数、多个过滤器也可以串联
    并没有改变原本的数据, 是产生新的对应的数据

示例

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

new Vue({
    el: '#root',
    data: {
        time: 1621561377603, //时间戳
        msg: '你好，同学'
    },
    //局部过滤器
    filters: {
        timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {
            // console.log('@',value)
            return dayjs(value).format(str)
        }
    }
})

html模版

<div id="root">
    <h2>显示格式化后的时间</h2>
    <!-- 过滤器实现 -->
    <h3>现在是：{{time | timeFormater}}</h3>
    <!-- 过滤器实现（传参） -->
    <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
    <h3 :x="msg | mySlice">你好，vue</h3>
</div>

内置指令

  • v-bind: 单向绑定解析表达式, 可简写为 :xxx

  • v-model: 双向数据绑定

  • v-for: 遍历数组/对象/字符串

  • v-on: 绑定事件监听, 可简写为@

  • v-if: 条件渲染（动态控制节点是否存存在）

  • v-else: 条件渲染（动态控制节点是否存存在）

  • v-show: 条件渲染 (动态控制节点是否展示)

  • v-text: 向其所在的节点中渲染文本内容，v-text会替换掉节点中的内容，{{xx}}则不会

  • v-html: 向指定节点中渲染包含html结构的内容，v-html会替换掉节点中所有的内容，{{xx}}则不会，v-html可以识别html结构（有安全性问题，xss攻击）

  • v-cloak: 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题: <h2 v-cloak>{{name}}</h2>

    [v-cloak] {
display:none;
}
/* 加载Vue，如果网络慢就将页面隐藏掉，不会显示{{xxx}}的问题 */

  • v-once: 所在节点在初次动态渲染后，就视为静态内容了,以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

  • v-pre: 跳过其所在节点的编译过程(不会去编译这个节点)，可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

自定义指令

  • 定义语法

    1. 局部指令：
      new Vue({directives:{指令名:配置对象} 或 directives:{指令名:回调函数} })
    2. 全局指令：
      Vue.directive(指令名, 配置对象) 或 Vue.directive(指令名, 回调函数)

  • 配置对象中常用的3个回调

    bind：指令与元素成功绑定时调用
    inserted：指令所在元素被插入页面时调用
    update：指令所在模板结构被重新解析时调用
    在回调方法中都有2个参数element-DOM元素，binding-绑定的值

  • 备注

    指令定义时不加v-，但使用时要加v-
    指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名

directives:{
    'big-number'(element, binding){
        // console.log('big')
        element.innerText = binding.value * 10
    },
    // big函数何时会被调用？
    // 1.指令与元素成功绑定时（一上来）
    // 2.指令所在的模板被重新解析时
    // html元素可以这么写 <span v-big="n">
    big(element, binding){
        console.log('big',this) //注意此处的this是window
        // console.log('big')
        element.innerText = binding.value * 10
    },
    // html元素 <input type="text" v-fbind:value="n">
    fbind:{
        //指令与元素成功绑定时（一上来）
        bind(element, binding){
            element.value = binding.value
        },
        //指令所在元素被插入页面时
        inserted(element, binding){
            element.focus()
        },
        //指令所在的模板被重新解析时
        update(element, binding){
            element.value = binding.value
        }
    }
}

生命周期

  1. 又名：生命周期回调函数、生命周期函数、生命周期钩子
  2. 是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
  3. 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
  4. 生命周期函数中的this指向是vm或组件实例对象

img

常用的生命周期钩子：

  1. mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
  2. beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

  1. 销毁后借助Vue开发者工具看不到任何信息。
  2. 销毁后自定义事件会失效，但原生DOM事件依然有效。
  3. 一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

Vue组件

  • Vue中使用组件的三大步骤
    1. 定义组件(创建组件)
    2. 注册组件
    3. 使用组件(写组件标签)

  1. 如何定义一个组件

    1. 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别：
      • el不要写，为什么？ --- 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
      • data必须写成函数，为什么？ --- 避免组件被复用时，数据存在引用关系

    备注：使用template可以配置组件结构

  2. 如何注册组件

    1. 局部注册：靠new Vue的时候传入components选项
    2. 全局注册：靠Vue.component('组件名', 组件)

  3. 编写组件标签，比如：<school></school>

关于组件名

  • 一个单词组成

    第一种写法(首字母小写)：school
    第二种写法(首字母大写)：School

  • 多个单词组成

    第一种写法(kebab-case命名)：my-school
    第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

  • 注意

    组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
    可以使用name配置项指定组件在开发者工具中呈现的名字

关于组件标签

第一种写法：<school></school>
第二种写法：<school/>
注意：不用使用脚手架时，<school/>会导致后续组件不能渲染

简写方式

const school = Vue.extend(options)可简写为：const school = options

其实当我们没有写Vue.extend时Vue框架会给我们自动加上Vue.extend来给生成组件，后期在写组件时可以省略Vue.extend

关于VueComponent

  1. school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
  2. 我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)
  3. 特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
  4. 关于this指向：
    • 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】
    • new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】
  5. VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm
  1. 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
  2. 为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法

到此Vue基础部分到此，后期我们就可以学习单文件组件了，写单文件组件需要vue脚手架中项目中写

标签：vue,DOM,vm,value,Vue,基础教程,组件,data
From： https://www.cnblogs.com/wdszh/p/17521766.html

相关文章

  • vue高级
    vue高级vue脚手架我们可以使用VueCLI来创建vue脚手架项目VueCLI官方文档安装vue/clinpminstall-g@vue/cli#或yarnglobaladd@vue/clivue--version#或vue-V#升级npmupdate-g@vue/cli#或者yarnglobalupgrade--latest@vue/cli创建一个vue项目#......
  • Vue（十二）：列表渲染—— v-for
    1.基础使用<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>基本列表</title><scripttype="text/javascript"src="../js/vue.js"></script></head><!--......
  • 介绍Vue router的history模式以及如何配置history模式
    引言Vuerouter给我们提供了两种路由模式，分别是hash模式和history模式。其中默认是使用hash模式，即URL中带有一个#符号，但是处于业务或个人喜爱的差别，Vuerouter也提供了history模式。但是由于Vue是单页SPA应用，所以每个路由并没有对应的html文件。什么是history模式history模式特......
  • 一篇读懂React、vue框架的生命周期函数
    原文合集地址如下，有需要的朋友可以关注本文地址合集地址当涉及到前端框架时，React和Vue.js是两个非常受欢迎的选择。它们都提供了强大的工具和功能，帮助开发者构建交互式的、可扩展的应用程序。在这两个框架中，生命周期函数是一个重要的概念，它们允许我们在组件的不同阶段执行特......
  • TypeScript+Vue3
    TypeScriptAny类型和unknown顶级类型1.没有强制限定哪种类型，随时切换类型都可以我们可以对any进行任何操作，不需要检查类型2.声明变量的时候没有指定任意类型默认为any3.弊端如果使用any就失去了TS类型检测的作用4.TypeScript3.0中引入的unknown类型也被认为是top......
  • vue3.0 外部配置文件
    vue3.0外部配置文件，重点是打包后也可以修改配置参数 一、在public中创建static文件夹，在static文件夹中创建config.js文件config.js{"webSocketUrl":"http://192.168.1.5:5011/httpCli"}二、在man.js中使用 axios来读取存在app.config.globalProperties.$......
  • vue - v-model在组件上的应用（包含子传父）
    一、v-model的参数默认情况下，v-model在组件上都是使用modelValue作为prop，并以update:modelValue作为对应的事件。我们可以通过给v-model指定一个参数来更改这些名字：<MyComponentv-model:title="bookTitle"/>在这个例子中，子组件应声明一个titleprop，并通过触发upd......
  • vue项目跨域问题
    vue项目跨域问题一、vue项目直接调用第三方接口后，打包成dist部署到服务器后，提示404以及跨域问题解决方式：使用宝塔部署时：如图：在图中位置加入以下代码即可!!!location/api/{rewrite^.+api/?(.*)$/$1break;proxy_passhttp://122.112.215.133:9901/;......
  • vue-slot插槽
    今天大致了解些vue插槽。在Vue.js中，插槽（slot）是一种机制，它允许你将内容插入到组件的特定位置。使用插槽，你可以在组件内定义一些可以被填充的占位符，然后在使用该组件时，将具体的内容插入到这些占位符中。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><......
  • vue3使用表格el-table-infinite-scroll.js:18 Uncaught (in promise) Error: [el-tabl
    先看下表格里面有没有这个el-scrollbar__wrapclass类 没有的话升级一下element-plus到最新的就行你可以先查看element-plus的版本npmview element-plus下载完之后 就有了......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99