• vue基础学习(一)


    本来要做一篇写好了的,结果新浪微博把下半篇截取了,不知道咋回事,一点也不好用!!!好大气!!
    但是如果看到下半篇想看上半篇的亲们可以从链接跳过去

     

    1vue的了解

    01-学习准备

    1、 vue浏览器插件的下载

    (1)     点击谷歌浏览器右上角

    vue基础学习(一)vue基础学习(一)

    (2)     选择以下文件即可

    vue基础学习(一)vue基础学习(一)

    2vscode插件live  server插件的使用

    (1)     安装live server插件

    (2)     ctrl+shift+p 输入live  server 即可以服务器形式启动项目,即使文件内容更改浏览器不需要刷新也会自动更改

    vue基础学习(一)

    2、 .vue后缀文件实现补全方式

    (1)     在文件->首选项->设置->添加以下代码即可

    "emmet.syntaxProfiles": {

    "vue-html": "html",

    "vue": "html"

    },

    "emmet.includeLanguages": {

    "vue-html": "html",

    "vue": "html"

    }

    02-为什么学vue

    vue基础学习(一)

    原始方法(左边)Vue(右边)

    vue基础学习(一)vue基础学习(一)

    03-vuehelloworld体会MVVM

    MVC:对项目的整体把控,M代表的是数据库中的数据,V代表的是前端的视图层,C用于处理MV之间进行交互的业务逻辑(业务逻辑需要程序员自己控制,自己编写)

    MVVM:主要用于一些前端的框架,MVC三层架构中的视图层再次进行层次划分,M是当前一个视图中需要用到的数据,V就是当前视图,VM负责MV之间的数据调度,内部已经帮你完成了数据的绑定和交互

    MVCMVVM之间的区别:MVC数据流通是单向的,MVVM是双向数据绑定

    双向数据绑定的意思就是模型中的数据可以之间更新到视图上,视图中的数据发生改变也可以直接更新到模型中能够做到双向数据绑定(通信)的原因:就是因为有VM的存在,VM内部的实现一般是框架已经处理完成,不需要程序员进行控制

     

    vue基础学习(一)

    vue基础学习(一)

    vue基础学习(一)

    1vue的使用方法:

    (1)     引入一个vue.js文件

    (2)     创建一个实例,监管html代码

         var  vm=new Vue();

    (3)     通过el属性指定vue实例监管的范围,它的值是一个id的值

        el:”id的值如:’#app’”

    (4)     通过data保存数据

        data:{msg:”hello world”}

    (5)     展示文本 {{}}

       

    {{msg}}}

    vue基础学习(一)

    2vue系统指令

    04-插值表达式的使用

    1、配置用户代码片段的方法:

    (1)     Ctrl+shift+p之后再输入框中输入snip选中配置用户代码片段

    vue基础学习(一)

    (2)     在新窗口中输入html

    (3)     找到提供好的html.json文件,复制html.json文件中的代码粘贴至输入html后的新窗口(html.json)中即可


    vue基础学习(一)

    (4)     再到新建的.html文件中输入vue即可呈现代码结构

    2reverse()方法的使用

    vue基础学习(一)

    3、文本的渲染方法:插值表达式

    vue基础学习(一)vue基础学习(一)

    05-v-text指令使用

    https://cn.vuejs.org/v2/api/

    1、 v-text的使用方法:  不能渲染带标签的文本

    (1)     在标签元素属性位置输入v-text=”属性名

    2、 v-text和插值表达式的区别

    (1)     v-text是写在标签元素属性的位置而插值表达式是写在标签的innerHTML位置

    06-v-html指令的使用

    1v-html的使用方法  (可以渲染标签元素)

    (1)   v-html是写在标签元素的属性位置,可以渲染带标签元素的文本,并将其以子元素显示出来

    vue基础学习(一)

    (2)     v-text :

    vue基础学习(一)

     

    07-v-bind指令的使用

    1v-bind的使用  (可以绑定属性和类名)

    (1)     可以用来动态绑定属性: v-bind:属性名=”data里面的属性值

    (2)     简洁写法: :属性名=”data里面的属性值

    (3)     v-bind动态绑定样式: :class=”{‘样式类名’:布尔值}”

        值若为false,则类名样式不会生效

        值若为true,则会显示类名样式

    vue基础学习(一)

    08-v-for指令的使用(上)

    1v-for可以遍历数组和对象

    vue基础学习(一)
    vue基础学习(一)

    08-v-for指令的使用(下)

    1、以下方法不能实现数据改变:数组的长度+数组下标去改变数组内容

    如:vm.user.length=0 &&  vm.user[0]={name:’张三’,age:22}

    vue基础学习(一)

    2、改变数组中的内容方法:

    1Vue.set(需要改变的数组,数组里的项即数组的下标,改变后的值)

    Vue.set(vm.user,0,{name:"44",age:44})

    3splice()方法删除数组中的内容

    vm.user.splice(0,1)  从数组中的第0 项开始,删除一项

    3、 :key=”index”的作用

    (1)     提高代码的唯一性 类似于id

    09-v-model双向数据绑定

    1、 v-model的双向数据绑定理解和使用范围

    (1)     modelview中的值同时发生改变

    (2)       只能在input+textarea+select中使用

    10- v-on事件绑定

    1v-on的使用方法

    (1)     在标签的属性位置:  v-on:事件名=”事件的执行函数

    (2)     简写方式: @click=”changeMsg”

    (3)     函数名写在methods

    2、 如何在事件方法methods里获取data中的属性

    (1)     获取data中的属性需要加上this即可 data中有namemethods中获取即:this.name

    (2)     this 指的就是vm这个实例

    vue基础学习(一)

    3、 事件对象的获取和定义

    (1)     @click=getEvent($event)  注意:这里只能是$event

    (2)     methods中可以随意起名  getEvent(随意起名)

    vue基础学习(一)

    4、 按键修饰符

    (1)     https://cn.vuejs.org/v2/api/#v-on

    vue基础学习(一)

    5、 如何获取键盘码以及函数的另一种写法

    vue基础学习(一)

    最后submit(){}submit:function(){}是一样的,可以选择适合自己的即可

    11- v-ifv-show

    1v-ifv-show的作用

    (1)     用来控制元素的显示和隐藏

    (2)     v-if=”布尔值” v-show=”布尔值  : v-if=true||false

    2、 v-ifv-show的区别和使用场景

    (1)     v-if是控制元素的现实和隐藏  (隐藏是直接将元素移除)

    (2)     v-show是控制元素的样式显示和隐藏  (隐藏是直接将元素设置样式为display:none)

    (3)     涉及大量dom操作就用v-show, 涉及到异步数据渲染就用v-if

    vue基础学习(一)

     

     

    vue基础学习(一)

    12- v-if补充

    1v-if的条件判断

    vue基础学习(一)

    13- v-cloak指令使用

    1、 如何解决初次进入页面出现闪烁问题?

    (1)     初次进入让标签隐藏,当加载完成后v-clock会被自动移除

    vue基础学习(一)

    3vue案例

    14- 案例:列表数据渲染

    步骤分析:

    1、 定义数组list[{id:1,name:”AA”,cTime:new Date()}]

    2、 V-for=”(item,index) in  list”

    3、 渲染数据

    vue基础学习(一)

    15- 案例:列表数据删除

    步骤分析:

    1、 给每个删除按钮绑定一个点击事件,需要传入一个索引才可获取大零钱电机的哪个

    2、 点击事件中执行移除数组中的第几项,根据索引移除 this.list.splice(index,1)

    vue基础学习(一)

    16- 案例:列表数据添加

    1、添加步骤分析:

    1、 给添加按钮绑定点击事件

    2、 给表单设置双向数据绑定 即表单设置v-model=”data中定义的属性

    3、 把数据添加至数组中 添加获取listthis.list.push({})

    vue基础学习(一)

    2、没有品牌数据显示

    (1)     判断数据的长度list.length==0就显示

    vue基础学习(一)

    4、 系统指令汇总

    {{}}:插值表达式

    
    作用:vue对象中的数据以及表达式显示到vue托管区域中
    {{这里书写vue对象中data里面的数据或者表达式}}

    v-cloak:解决表达式闪烁问题

    
    1. 定义一个样式

    2.
    使用
    {{name}}

    原理:vue.js文件还没有加载出来时 使用[v-cloak]样式作用于当前指令所在标签,vue.js能够起作用时,会自动删除v-cloak指令

    v-text:输出文本数据

    
    

    v-html:输出HTML结构数据

    
    

    ​data{
    name
    'zs'
    }

    v-bind:动态给标签或者组件绑定属性

    
    

    // 使用:简写v-bind
      
    // 变量和常量组合
    跳转
    data
    {
    cls: 'red blue',
    id: 1
    }

    v-on:绑定事件

    
    

    // 简写


    methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
           show: function () {
             
           }
    }

    v-model:双向数据绑定

    
    // 可以使用的标签:input textarea select 组件

    // name
    会和表单元素的value进行关联 value值变化 name值变化 反过来name值发生变化 value值也会发生变化

    v-for:循环输出HTML元素

    
    
    {{item.name}}

    v-if:根据表达式值的真假决定元素的显示隐藏

    
    // isShowtrue显示div false隐藏div
    // v-if
    是直接操作DOM 即隐藏时会将该divDOM结构中移除

    v-show: 根据表达式值的真假决定元素的显示隐藏

    
    // isShowtrue显示div false隐藏div
    // v-show
    是操作div的样式 显示时添加 style = 'display:block'; 隐藏时添加style = 'display:none'

    v-if 是删除DOM元素 效率比较低 会造成页面的结构重新绘制
    v-show 是控制样式 只会改变当前这一个元素的样式 不会造成页面结构的重新绘制

     


  • 相关阅读:
    脚本执行策略设置
    获取日期与时间戳小笔记
    Intellij IDEA部分简介
    Intellij IDEA脚本参数化、关联、检查点
    LR中的时间戳
    LeetCode 35.Search Insert Position
    LeetCode 34.Search for a Range
    LeetCode 33.Search in Rotated Sorted Array(M)
    LeetCode 81.Search in Rotated Sorted Array II(M)
    LeetCode 278.First Bad Version(E)(P)
  • 原文地址:https://www.cnblogs.com/guanhuohuo/p/12526224.html
Copyright © 2020-2023  润新知