点击上方“蓝字”关注我们吧！

vue学习笔记

官网：https://cn.vuejs.org/v2/guide/

1、vue体验

demo示例：

image.png

示例代码：

<html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Documenttitle>  head>  <body>    <div id="app">      <h1>系统名称：{{title}}h1>      <ul>        <li v-for="(item, i) in products">          名称：{{item.name}}，库存：{{item.stock}}          <button @click="remove(i)">删除button>        li>      ul>    div>    // 引入vue    <script src="./vue.min.js">script>    <script>            var vm = new Vue({              el: "#app",              data: {          title: "管理系统",          products: [            { name: "iphone", stock: 1 },            { name: "xiaomi", stock: 2 },          ],        },              methods: {          remove(i) {            this.products.splice(i, 1);          },        },      });script>  body>html>

vue实例中data介绍：https://cn.vuejs.org/v2/api/#data

模板语法

官网介绍：https://cn.vuejs.org/v2/guide/syntax.html
demo示例：

image.png

示例代码：

<html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Documenttitle>  head>  <body>    <div id="app">    <h1>系统名称：{{title}}h1>        <span>message: {{ msg }}span>    <br>    <span v-once>once message: {{ msg }}span>        <br>    <p>Using mustaches: {{ rawHtml }}p>    <span>Using v-html directive:span>    <p v-html="rawHtml">p>        <div v-bind:id="dynamicId">v-binddiv>        <div :id="dynamicId">缩写v-binddiv>        <button v-bind:disabled="isButtonDisabled">Buttonbutton>        <p v-if="seen">if 现在你看到我了p>    <p v-else>else 现在你看到我了p>        <button v-on:click="counter += 1">Add 1button>        <button @click="counter += 1">缩写 Add 1button>    <p>The button above has been clicked {{ counter }} times.p>        <button v-on:click="greet">Greetbutton>        <br>    <input v-model="message" placeholder="edit me">    <p>Message is: {{ message }}p>        <p>firstName: {{ firstName }}p>    <p>lastName: {{ lastName }}p>    <p>计算属性 fullName: {{ fullName }}p>    <p>方法 fullName: {{ getFullName() }}p>    div>    <script src="./vue.min.js">script>    <script>      var vm = new Vue({        el: "#app",        data: {          title: "管理系统",          products: [            { name: "iphone", stock: 1 },            { name: "xiaomi", stock: 2 },          ],          msg: "“Mustache”语法 (双大括号)",          rawHtml: 'html',          dynamicId: "v-bind",          isButtonDisabled: false,          seen: false,          counter: 0,          message: "",          firstName: "hu",          lastName: "xq",        },        computed: {          fullName() {            console.log("+++");            return this.firstName + this.lastName;          },        },        methods: {          getFullName() {            console.log("---");            return this.firstName + this.lastName;          },          greet: function (event) {            // `this` 在方法里指向当前 Vue 实例            alert('Hello ' + this.title + '!')            // `event` 是原生 DOM 事件            if (event) {              alert(event.target.tagName)            }          },        }      });script>  body>html>

tips 计算属性和方法的区别

  • 计算属性可以赋值，方法不行

  • 计算属性会进行缓存，如果依赖属性不变，会直接使用缓存结果，不会进行重新计算

特殊属性：key

官网链接：https://cn.vuejs.org/v2/guide/conditional.html#%E7%94%A8-key-%E7%AE%A1%E7%90%86%E5%8F%AF%E5%A4%8D%E7%94%A8%E7%9A%84%E5%85%83%E7%B4%A0

示例代码：

<html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Documenttitle>  head>  <body>    <div id="app">      <h1>登录h1>      <div v-if="loginType=='mobile'">        <label>手机号label>        <input type="text" key="mobile"/>      div>      <div v-else>        <label>邮箱label>        <input type="text" key="email"/>      div>      <div>        <button @click="loginType = loginType=='mobile'?'email':'mobile'">切换登录方式button>      div>    div>    <script src="./vue.min.js">script>    <script>      var vm = new Vue({        el: "#app",        data: {          loginType: "mobile",        },        methods: {        },      });script>  body>html>

-END-转发，点赞，在看，安排一下？

image是否有disabled属性_Vue学习笔记 模板语法、计算属性相关推荐

  1. Vue学习笔记之04-computed计算属性

    计算属性 computed 什么是计算属性, 在某些情况下, 需要将数据先进行转化后再进行显示, 或者需要将多个数据结合后再进行显示, 那么就需要将属性进行处理, 这就叫做计算属性 在进行变量的操作的 ...

  2. #学习笔记#模板语法

    WXML wxml是框架设计的一套标签语言,结合基础组件,事件系统,可以构建出页面的结构 1.数据绑定 在js文件中data里加入我们需要的数据,这里如图所示加入error 之后再wxml中调用数据时 ...

  3. vue 计算属性_lt;Vue 源码笔记系列6gt;计算属性 computed 的实现

    1. 前言 原文发布在语雀: <Vue 源码笔记系列6>计算属性 computed 的实现 · 语雀​www.yuque.com 上一章我们已经学习过 watch,这一章就来看一下计算属性 ...

  4. Postgresql学习笔记-高级语法篇

    Postgresql学习笔记-高级语法篇 Postgresql 约束 Postgresql约束用于规定表中的数据规则. 如果存在违反约束的数据行为,行为会被约束终止. 约束可以在创建表的时候就规定(通 ...

  5. 设计模式学习笔记——模板(Template)模式

    设计模式学习笔记--模板(Template)模式 @(设计模式)[设计模式, 模板模式, template, 模板方法] 设计模式学习笔记模板Template模式 基本介绍 模板案例 类图 实现代码 ...

  6. OpenCV 学习笔记（颜色直方图计算 calcHist）

    OpenCV 学习笔记(颜色直方图计算 calcHist) 最近在看一本OpenCV 的书,书名是 <OpenCV 3 Computer Vision Application Programmi ...

  7. 图论01.最短路专题_学习笔记+模板

    图论01.最短路专题_学习笔记+模板 一.定义与性质 ● 需要的前导知识点 路径 最短路 有向图中的最短路.无向图中的最短路 单源最短路.每对结点之间的最短路 ● 最短路的性质 对于边权为正的图,任意 ...

  8. C++学习笔记:模板

    C++学习笔记:模板 1.函数模板 2.类模板 2.1类模板注意事项 2.2类模板中函数的创建时机 2.3类模板对象作函数参数时 2.4类模板与继承 2.5类模板分文件编写 2.6类模板友元 2.6. ...

  9. vue 计算属性和data_vue之watch和计算属性computed

    区别一:watch监听的是一个变量(或者一个常量)的变化,这个变量可能是一个单一的变化也可能是一个数组.computed可以监听很多个变量,但是这个变量一定是vue实例里面的. Vue 测试实例 - ...

最新文章

  1. java auth fail_com.jcraft.jsch.JSchException: Auth fail
  2. 中国存储器行业应用趋势与投资机遇研究报告2022版
  3. Kaggle 首战拿银总结 | 入门指导 (长文、干货）
  4. c语言 一元二次函数,计算一元二次函数的根，大家看看那里有错了。。。。
  5. 是什么原因引起的“ Invalid Session”错误？
  6. 5岁自学python编程-人工智能时代,孩子需要什么?
  7. 软考中级软件设计师--5面向对象基础
  8. 百度世界地图实现方法
  9. 物联网产品的发展简介（二）【产品篇02】
  10. MYSQL数据库ANY的用法_数据库——IN、ANY、SOME 和 ALL 操作符的使用
  11. “钢铁大王”卡耐基：一步一个脚印的职场人
  12. 跨专业考计算机研究生有专业限制吗,跨专业考计算机研究生难不难
  13. win10系统Onedrive登录输入邮箱后界面空白的解决方法
  14. 如何批量处理/修改文件的后缀名（使用批处理.bat进行）
  15. sql server 按拼音分类排序的功能
  16. html实现文字滚动
  17. 智慧城市的互联网大脑架构图，大社交网络与智慧城市结合是关键
  18. UI基础第十四弹:UItableview使用代码自定义团购页面
  19. 构造拉丁方阵和正交拉丁方阵组
  20. 面向维基百科的领域知识演化关系抽取

热门文章

  1. LeetCode 231. 2的幂 LeetCode 338. 比特位计数（2进制1的个数）
  2. mysql mtop 使用_MYSQLMTOP监控环境搭建
  3. Django第一天笔记
  4. JavaScript 书写方式与注释
  5. centos6.5装mysql好难_CentOS6.5 下MySQL傻瓜式安装
  6. java listview控件_ListView普通列表控件的使用
  7. 阿里P8架构师谈：MySQL数据库的索引原理、与慢SQL优化的5大原则
  8. Android官方开发文档Training系列课程中文版：构建第一款安卓应用之创建用户界面
  9. SiameseSentenceSimilarity相似句子匹配分类项目
  10. Google 与 GitHub 结盟，为保护软件供应链而战！