vue从入门到精通之基础篇（一）语法概要

(1).vue起步

  • 1:引包
  • 2:启动 new Vue({el:目的地,template:模板内容});
  • options
    • 目的地 el
    • 内容 template
    • 数据 data 保存数据属性
      数据驱动视图

(2).插值表达式

  • {{ 表达式 }}
    • 对象 (不要连续3个{{ {name:‘jack’} }})
    • 字符串 {{ ‘xxx’ }}
    • 判断后的布尔值 {{ true }}
    • 三元表达式 {{ true?‘是正确’:‘错误’ }}
  • 可以用于页面中简单粗暴的调试
  • 注意: 必须在data这个函数中返回的对象中声明

(3).什么是指令

  • 在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx表示
    • 比如html页面中的属性 <div v-xxx ></div>
  • 比如在angular中 以ng-xxx开头的就叫做指令
  • 在vue中 以v-xxx开头的就叫做指令
  • 指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值，框架会进行相关DOM操作的绑定

(4).vue中常用的v-指令演示

  • v-text:元素的InnerText属性,必须是双标签 跟{{ }}效果是一样的 使用较少
  • v-html: 元素的innerHTML
  • v-if : 判断是否插入这个元素,相当于对元素的销毁和创建
  • v-else-if
  • v-else
  • v-show 隐藏元素 如果确定要隐藏, 会给元素的style加上display:none。是基于css样式的切换
 v-text 只能用在双标签中v-text 其实就是给元素的innerText赋值v-html 其实就是给元素的innerHTML赋值v-if 如果值为false,会留下一个<!---->作为标记，万一未来v-if的值是true了，就在这里插入元素如果有if和else就不需要单独留坑了如果全用上  v-if 相邻v-else-if 相邻 v-else 否则 v-else-if可以不用v-if和v-else-if都有等于对应的值，而v-else直接写v-if家族都是对元素进行插入和移除的操作v-show是显示与否的问题注意: 指令其实就是利用属性作为标识符,简化DOM操作,看：v-model="xxx"v-model 代表要做什么  xxx代表针对的js内存对象写在那个元素上，就对哪个元素操作

(5).v-if和v-show的区别 (官网解释)

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

(6).v-bind使用

  • 给元素的属性赋值

    • 可以给已经存在的属性赋值 input value
    • 也可以给自定义属性赋值 mydata

  • 语法 在元素上 v-bind:属性名="常量||变量名"

  • 简写形式 :属性名="变量名"

  • <div v-bind:原属性名="变量"></div>
<div :属性名="变量"></div>

(7).v-on的使用

  • 处理自定义原生事件的,给按钮添加click并让使用变量的样式改变
  • 普通使用 v-on:事件名="表达式||函数名"
  • 简写方式 @事件名="表达式"

(8).v-model

  • 双向数据流（绑定）
    • 页面改变影响内存(js)
    • 内存(js)改变影响页面

(9).v-bind 和 v-model 的区别?

  • input v-model="name"
    • 双向数据绑定 页面对于input的value改变，能影响内存中name变量
    • 内存js改变name的值，会影响页面重新渲染最新值
  • input :value="name"
    • 单向数据绑定 内存改变影响页面改变
  • v-model: 其的改变影响其他 v-bind: 其的改变不影响其他
  • v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染

(10).v-for的使用

  • 基本语法 v-for="item in arr"
  • 对象的操作 v-for="item in obj"
  • 如果是数组没有id
    • v-for="(item,index) in arr" :class="index"
  • 各中v-for的属性顺序(了解)
    • 数组 item,index
    • 对象 value,key,index

(11).过滤器filter

  • filters
    • 将数据进行添油加醋的操作
    • 过滤器分为两种
      • 1:组件内的过滤器(组件内有效)
      • 2:全局过滤器(所有组件共享)
局部过滤器的使用
  • 先注册,后使用
  • 组件内 filters:{ 过滤器名:过滤器fn } 最终fn内通过return产出最终的数据
  • 使用方式是 {{ 原有数据 | 过滤器名 }}
  • 过滤器fn:
    • 声明function(data,argv1,argv2...){}
    • 使用{{ 数据 | 过滤器名(参数1,参数2) }}
全局过滤器的使用
  • 语法：Vue.component('过滤器的名字',fn)
  • 调用：跟局部组件调用方式一样

(12).侦听器watch

  • watch 监视单个属性和对象

    watch:{//监视复杂类型,无法监视的原因是因为监视的是对象的地址 // obj:function(newV,oldV) {// 	console.log(newV,oldV);// },// key是属于data属性的属性名，value是监视后的行为 fn中的参数（新值，旧值）msg:function (newV,oldV) {console.log(newV,oldV);if (newV==='alex') {console.log('sb');}},// 深度监视 ：object ||arraystus:{deep:true,//深度监视handler:function (newV,oldV) {console.log(newV[0].name)}}
    小结： 基本数据类型 简单监视，复杂数据类型深度监视

(13).计算属性computed

  • computed 同时监视多个属性

    ​ 默认computed只有getter方法

(14).获取DOM元素

  • 救命稻草, document.querySelector
  • 1: 在template中标识元素 ref=“xxxx”
  • 2: 在要获取的时候, this.$refs.xxxx 获取元素
    • 创建组件,装载DOM,用户点击按钮
  • ref在DOM上获取的是原生DOM对象
  • ref在组件上获取的是组件对象
    • $el 是拿其DOM
    • 这个对象就相当于我们平时玩的this,也可以直接调用函数\

-特殊情况

// 需求：input输入框 获取焦点
var App = {data: function() {return {isShow : false}},template: `<div class='app'><input type="text"  v-show = 'isShow' ref = 'input'/></div>`,mounted: function() {this.isShow = true;console.log(this.$refs.input);// $nextTick 是在DOM更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick 可以在回调中获取到更新后的DOMthis.$nextTick(function() {// 更新之后的DOMthis.$refs.input.focus();})}}new Vue({el: '#app',data: function() {return {}},template: `<App />`,components: {App}});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/249288.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

dede 文章列表页如何倒序排列

dede 文章列表页如何倒序排列

{dede:arclist row6 typeid18 orderwayasc} <li>;<a href"[field:arcurl/]">[field:title/]</a></li> {/dede:arclist} 正常排列&#xff1a;orderwayasc倒序排列&#xff1a;orderwaydesc转载于:https://www.cnblogs.com/php-qiuwei/p/1062…
阅读更多...
Chapter 5 Blood Type——24

Chapter 5 Blood Type——24

"Shes just a little faint," he reassured the startled nurse. "Theyre blood typing in Biology." "她只是有点头晕&#xff0c;" 他让护士放心的说道。“他们再生物课上测血型。” The nurse nodded sagely. "Theres always one."…
阅读更多...
vue从入门到精通之基础篇（二）组件

vue从入门到精通之基础篇（二）组件

(1).局部组件的使用 ​ 渲染组件-父使用子组件 1: 创建子组件(对象) var Header { template:模板 , data是一个函数,methods:功能,components:子组件们 } 2: 在父组件中声明,根属性components:{ 组件名:组件对象 }3: 在父组件要用的地方使用 <组件名></组件名> …
阅读更多...
@Scheduled

@Scheduled

Scheduled注解的使用这里不详细说明&#xff0c;直接对8个参数进行讲解。 参数详解 cron 该参数接收一个cron表达式&#xff0c;cron表达式是一个字符串&#xff0c;字符串以5或6个空格隔开&#xff0c;分开共6或7个域&#xff0c;每一个域代表一个含义。 cron表达式语法 […
阅读更多...
eclipse2019-03设置代码编辑区背景为图片

eclipse2019-03设置代码编辑区背景为图片

一、我的主题设置如下所示 二、找到如下所示或类似的文件夹 三、在该文件夹里的images文件夹里添加图片 四、在CSS目录下的e4-dark_win.css文件中添加如下代码　　 .MPart StyledText { 　　　　background-image: url(./bg.jpg); 　　　　background-repeat: no-repeat;　　…
阅读更多...
idea集成gitlab使用ssh免密登录

idea集成gitlab使用ssh免密登录

网上有很多介绍ssh免密登录的文章&#xff0c;具体步骤如下&#xff1a; 1. 生成SSH Key ssh-keygen -t rsa -C "your_emailexample.com" 默认会在相应路径下&#xff08;/your_home_path&#xff09;生成id_rsa和id_rsa.pub两个文件&#xff0c;此时终端会显示&…
阅读更多...
vue从入门到精通之基础篇（三）生命周期

vue从入门到精通之基础篇（三）生命周期

生命周期 定义&#xff1a; 每个 Vue 实例在被创建时都要经过从创建倒挂载再到更新、卸载的一系列过程&#xff0c;同时在这个过程中也会运行一些叫做生命周期钩子的函数&#xff0c;可以让我们用自己注册的js方法控制整个大局&#xff0c;在这些事件响应方法中的this直接指向…
阅读更多...
libcurl库进行http通讯网络编程

libcurl库进行http通讯网络编程

https://www.cnblogs.com/lifan3a/articles/7479256.html
阅读更多...
Java 开始

Java 开始

&#xff08;事先声明&#xff1a;该文章并非完全是我自己的产出&#xff0c;更多的是我个人在看到资料后通过理解并记录下来&#xff0c;作为自己阅读后的一个笔记&#xff1b;我现在试图对自己多年工作中的知识点做一个回顾&#xff0c;希望能融会贯通&#xff09; &#xff…
阅读更多...
Java核心技术笔记——第 12 章 反射

Java核心技术笔记——第 12 章 反射

转载自&#xff1a;[https://www.cnblogs.com/chanshuyi/p/head_first_of_reflection.html] 12 反射 1. 引入反射 通常情况下&#xff0c;调用一个类的方法的步骤如下&#xff1a; 创建该类的对象。调用该对象的方法。通过这种方式调用方法时&#xff0c;必须要知道类的定义以及…
阅读更多...
HTML5知识点汇总

HTML5知识点汇总

1、HTML5新特性 用于绘画的canvas标签用于媒介回放的video和audio元素对本地离线储存的更好支持新的特殊内容元素&#xff0c;如&#xff1a;article、footer、header、nav、section、aside、hgroup、figure新的表单控件&#xff0c;如&#xff1a;calendar、date、time、emai…
阅读更多...
实用网站

实用网站

https://blog.csdn.net/devcloud/article/details/103121883
阅读更多...
网络（图）（数学）

网络（图）（数学）

转载于:https://www.cnblogs.com/fengxunling/p/9781575.html
阅读更多...
DES加解密时 Given final block not properly padded 的解决方案

DES加解密时 Given final block not properly padded 的解决方案

事情的经过是这个样子的。。。。。。 先说说问题是怎么出现的。根据客户需求&#xff0c;需要完成一个一键登录的功能&#xff0c;于是我的项目中就诞生了DesUtil&#xff0c;但是经过几百次测试&#xff0c;发现有一个登录直接报错&#xff01;难道又遇到神坑啦&#xff01;&a…
阅读更多...
java 算法优化向导

java 算法优化向导

一.什么是数据结构&#xff1f;什么是算法 不必像学生时代深究定义。以一个简单的例子说明。 数据结构&#xff0c;图书馆的书怎么摆列&#xff0c;按照书的类型&#xff0c;作者&#xff0c;出版时间&#xff0c;语言等等放置&#xff0c;这就是数据的结构。 算法&#xff0c…
阅读更多...
appium工作原理

appium工作原理

Appium原理 面试的时候&#xff0c;被问到appium原理&#xff0c;一点不会&#xff0c;实在尴尬。大家可以直接翻看原作https://blog.csdn.net/jffhy2017/article/details/69220719 appium运行时安装的2个应用&#xff1a;Appium Settings和Unlock。 一、appium加载的过程图解&…
阅读更多...
LeetCode 21. Merge Two Sorted Lists

LeetCode 21. Merge Two Sorted Lists

LeetCode 21. Merge Two Sorted Lists 分析 难度&#xff1a;易 题目 Merge two sorted linked lists and return it as a new list. The new list should be made by splicing together the nodes of the first two lists. Example: Input: 1->2->4, 1->3->4 Out…
阅读更多...
Mac OS X 下 TAR.GZ 方式安装 MySQL

Mac OS X 下 TAR.GZ 方式安装 MySQL

Mac OS X 下 TAR.GZ 方式安装 MySQL 注意: 本篇文章适用与 MySQL 5.6 版本的安装, 但已不再适用 5.7 的安装, 5.7 的安装方式请参见:《Mac OS X 下 TAR.GZ 方式安装 MySQL 5.7》 在 Mac 系统上, 安装 MySQL Server 一般是用 DMG 包在图形化界面下按提示安装, 此外 MySQL 还提供…
阅读更多...
快排再改进

快排再改进

快排再改进 #include <iostream> using namespace std;void mySwap(int &a, int &b) {int temp a;a b;b temp; }void insertSort(int a[], int left, int right) {int tmp;int in 0;int out 0;for (out left 1; out < right; out) {tmp a[out];in ou…
阅读更多...
【Linux基础】crontab定时命令详解

【Linux基础】crontab定时命令详解

周期执行的任务一般由cron这个守护进程来处理[ps -ef|grep cron]。cron读取一个或多个配置文件&#xff0c;这些配置文件中包含了命令行及其调用时间。cron的配置文件称为“crontab”&#xff0c;是“cron table”的简写。 一、cron服务　　cron是一个linux下 的定时执行工具&a…
阅读更多...
最新文章

Copyright @ 2022~2023