前端框架学习 Vue (1) 概念,常用指令

Vue是什么

概念:

        Vue是一个用于 构建用户界面 的 渐进式 框架

        1.构建用户界面:基于数据动态渲染页面
             

        2.渐进式:循序渐进的学习(学一点就能用一点)

                 (1)Vue核心包开发

                        场景:局部模块改造

                (2)Vue核心包&Vue插件 工程化开发

                        场景:整站开发

        3.框架:一套完整的项目解决方案,提升开发效率(理解记忆规则)

        优点:大大提升开发效率(70%以上)

        缺点:需要理解记忆规则->官网

创建Vue实例初始化渲染

核心步骤:

        1.准备容器

        2.引包(官网)-开发版本/生产版本

<script src=”https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js”></script>

        3.创建Vue实例 new Vue()

        4.指定配置项 -> 渲染数据

  // 一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数

  const app = new Vue({

    // 通过 el 配置选择器，指定 Vue 管理的是哪个盒子

    el: ‘#app’,

    // 通过 data 提供数据

    data: {

      msg: ‘Hello World’,

      count: 666

    }

  })

                (1)el指定挂载点,配置选择器,指定Vue管理的是哪个盒子

                (2)data提供数据

插值表达式 {{    }}

插值表达式是一种Vue的模板语法

1.作用:利用表达式进行插值,渲染到页面中

        表达式:是可以被求值的代码,js引擎会将其计算出一个结果

2.语法: {{  表达式 }}               

  <p>{{ nickname }}</p>

  <p>{{ nickname.toUpperCase() }}</p>

  <p>{{ nickname + ‘你好’ }}</p>

  <p>{{ age >= 18 ? ‘成年’ : ‘未成年’ }}</p>

  <p>{{ friend.name }}</p>

  <p>{{ friend.desc }}</p>

插值表达式是一种Vue的模板语法

      <div id=”app”>

                {{ msg }}

        </div>

        data:{

                msg: ‘Hello world’

        }  

3.注意点

        (1)使用的数据必须存在(data中赋值)

        (2)支持的是表达式,而非语法,比如:if  for等(三元运算符可以)

        (3)不能在标签属性中使用{{ }}插值

Vue核心特征:响应式

我们已经掌握了基础的模板渲染,其实除了基础的模板渲染,Vue背后还做了大量工作

比如:数据的响应式处理 ->响应式:数据发生变化,试图自动更新

如何访问&修改?data中的数据,最终会被添加到实例上

        (1)访问数据:“实例.属性名”

        (2)修改数据:“实例.属性名” = “值”

数据改变,试图自动更新

聚焦于数据 ->数据驱动试图

        使用Vue开发,关注业务的核心逻辑,根据业务修改数据即可

安装Vue Devtools开发者工具:装插件调试Vue应用

在浏览器插件中安装Vue.js devtools

打开Vue运行的页面,调试工具中Vue栏,即可查看修改数据,进行调试

Vue指令

Vue会根据不同的指令,针对标签实现不同的功能

指令:带有v-前缀的特殊标签属性

v-html

作用:设置innerHTML

语法:v-html=”表达式”(能解析html标签显示在网页中)

v-show

1.作用:控制元素显示隐藏

2.语法:v-show = “表达式” 表达式true显示,false隐藏

3.原理:切换display:none控制显示隐藏

4.场景:频繁切换显示隐藏的场景

v-if

1.作用:控制元素显示隐藏

2.语法:v-if = “表达式” 表达式true显示,false隐藏

3.原理:基于条件判断,是否创建或移除元素节点

4.场景:要么显示,要么隐藏,不频繁切换的场景

v-else v-else-if

1.作用:辅助v-if进行判断渲染

2.语法:v-else  v-else-if = “表达式”

3.注意:需要紧挨着v-if一起使用

v-on

1.作用:注册事件 = 添加监听 + 提供处理逻辑

2.语法 :

        (1)v-on:事件名 =”内联语句”

        (2)v-on.事件名 = “methods中的函数名”

3.简写:@事件名

调用传参

v-bind

1.作用:动态设置html标签属性 ->src url title等

2.语法:v-bind:属性名=”表达式”

3.注意:简写形式 :属性名 = “表达式”

v-for

1. 作用:基于数据循环,多次渲染整个元素  ->数组,对象,数字…

2.遍历数组语法:

        v-for = “(item,index) in 数组”

        item每一项,index下标

        省略index :v-for =”item in 数组”

书架删除案例

v-for 中的key

语法:key属性 = “唯一标识”

作用:给列表项添加唯一标识.便于Vue进行列表项的正确排序复用.

v-for中的key-不加key

v-for的默认行为会尝试原地修改元素(就地复用)

注意点:

        1.key的值只能是字符串或数字类型

        2.key的值必须具有唯一性

        3.推荐使用id作为key(唯一),不推荐使用index作为key(会变化,不对应)

v-model

1.作用:给表单元素使用,双向数据绑定 ->可以快速 获取 或 设置  表单元素内容

(1)数据变化  ->试图自动更新

(2)试图变化 ->数据自动更新

语法: v-moel =”变量”

代码007普通

打赏 收藏 海报 链接