Vue学习01-基本概念


学习来源:渡一教育

关于Vue

vue是一个前端开发框架,用于降低UI复杂度

具有以下特点:

  • 渐进式
  • 响应式
  • 组件化

常用插件推荐(VScode):

  • Auto Rename Tag :自动更改结束标签
  • Live Server:自动搭建本地服务器
  • Prettier - Code formatter: 代码美化
  • Vetur: Vue组件格式支持
  • vscode-icons: 文件图标美化

基础配置

<script>
new vue({
    el: "", //配置模板
    data: {
        //配置数据
    },
});
</script>

ES6知识补充

  • 速写属性
  • 速写方法
  • 箭头函数

Vue实例

通过new Vue({})创建对象,配置对象中部分内容会被提取到vue中

挂载

让vue实例控制网页中某个区域的过程称为挂载。

挂载方式:

  1. 通过el: "CSS选择器"进行配置
  2. 通过vue实例.$mount("CSS选择器")进行配置

模板

被vue实例控制的页面片段

模板的作用

提高渲染效率,vue把模板编译成虚拟DOM树,然后载生成真实DOM

模板书写地方

  • 在挂载的元素内直接书写
  • template配置中书写
  • render配置中用函数创建

模板内容

  1. 静态内容
  2. 插值{{js表达式}}
  3. 指令:

    • v-html: 绑定元素的innerHTML
    • v-bind: 属性名(绑定属性)
    • v-on: 事件名(绑定事件)
    • v-if: 判断元素是否需要渲染
    • v-show: 判断元素是否应该显示
    • v-for: 用于循环生成元素
    • v-bind:key: 用于在帮助重新渲染时元素的比对,通常和v-for配合使用,提高渲染率
    • v-model: 语法糖,双向绑定

配置对象

  1. data: 数据
  2. template: 字符串,配置模板
  3. el: 配置挂载区域
  4. methods: 配置方法
  5. computed: 配置计算属性

计算属性和方法的区别:

  1. 计算属性使用时是当成属性使用,而方法则需要调用
  2. 计算属性会计算缓存,如果依赖不变,则直接使用缓存,不会重新计算
  3. 计算属性可当成属性赋值

组件

概念

组件化,就是把一个页面中区域功能细分,每个区域成为一个组件,每个组件包含:

  • 功能(js代码)
  • 内容(模板代码)
  • 样式(CSS代码)

组件创建

组件是根据一个普通的配置对象创建的,所以要开发一个组件,只需写一个配置对象即可,与Vue实例基本相同

var myComp = {
    data(){
        return {
            //...
        }
    },
    computed: {
        //...
    },
    methods: {
        //...
    },
    template: `...`
}

组件配置对象与Vue实例的差异:

  1. el配置
  2. data是一个函数,该函数的返回对象作为数据
  3. 由于没有el配置,组件模板必须定义在template

注册组件

注册组件有两种方式:

全局注册

全局注册组件,整个应用中任何地方都可以使用该组件

注册方式:

// 参数1: 组件名称,在模板中使用时使用该名称
// 参数2: 组件配置对象
Vue.component('my-comp',myComp)

局部注册

哪里需要用到组件,就在哪里注册

注册方式:在要使用组件的组件或实例中加入一个配置:

var Comp = {
    components: {
        // 属性名为组件名称,模板中将使用该名称
        // 属性值为组件配置对象
        "my-comp": myComp
    },
    template: `
    <div>
    <!-- 该组件的其他内容 -->
    <my-comp></my-comp>
    </div>
    `
}

应用组件

把组件名当作HTML元素名使用即可

注意:

1.组件使用必须有结束
2.组件的命名: 组件命名需要遵循规范,组件可以使用kebab-case短横线命名法,亦可以使用PascalCase大驼峰命名法

var Comp = {
    components:{
        "my-comp":myComp, //方式1
        MyComp: myComp, //方式2
    }
}

组件树

一个组件创建好后,会在各种地方使用。它可能多次出现在vue实例中,也可能出现在其他组件中,于是就形成了一个组件树。

组件树

向组件传递数据

向组件传递数据的方式有多种,其中最常见的是使用 组件属性component props

首先在组件中申明可以接受哪些属性

var MyComp = {
    props: ["p1","p2","p3"],
    template: "<div>{{p1}},{{p2}},{{p3}}</div>"
}

评论已关闭

https://file.ztongyang.cn/yang/picttures/QQqr.jpg https://file.ztongyang.cn/yang/picttures/wechatqr.png https://metu.ztongyang.cn/a/avatar.jpg avatar

南玖

生命不息,折腾不止

  网站咨询
  •   当前在线1人
  •   加载耗时37 ms
  •   文章数目40篇
  •   分类总数10个
  •   评论总数46条
  •   站点字数3.84 W
  •   运行时间12天
  访问信息
  •   
  •   2020-08-06 06:49:56 Thu
  •   ?浏览器
  •   操作系统
  热门文章