又来做笔记啦,今天又自暴自弃了,还好及时清醒过来了,什么时候努力都不晚,主要是要一直坚持下去,只要坚持就一定会有收获,所有成功得人背后都是付出了巨大得努力的,没有人平白无故的成功。看似光鲜亮丽的背后,人家都不知道付出多少时间和汗水,所以我也要加油,对自己有信心,虽然现在不懂,没关系只要学习就一定会有收获,要对自己有信心。加油,我可以的。废话不多说啦,开始我今天的总结。

首先,第一节学的就是Vue的计算属性Computed啦,Computed的作用呢就是可以使复杂的逻辑和频繁的数据变化操作变得简单起来。比如,它适用于 搜索功能啦,以及复杂的逻辑运算啦。只有数据发生改变时,计算属性才会被调用,避免的资源的浪费啦,相比之下,每当触发重新渲染时,methods方法呢,调用方法将总会再次执行函数。

举例说明:

<!-- vue-app是根容器 -->
<div id="vue-app">
  <h1>Computed 计算属性</h1>
  <button v-on:click="a++">Add to A</button>
  <button v-on:click="b++">Add to B</button>
  <p>A —— {{a}}</p>
  <p>B —— {{b}}</p>
  <!-- 在标签内部调用方法的时候方法名字后面需要添加"()" -->
  <!-- <p>Age + A = {{addToA()}}</p> -->
  <p>Age + A = {{addToA}}</p>
  <!-- 如果调用计算属性computed里面的方法,不需要加() -->
  <!-- 一般dom数据变话大的,例如大量搜索和耗时的情况下会用计算属性,一般情况下还是用methods实现 -->
  <p>Age + B = {{addToB}}</p>
</div>
<script>
  //实例化
  new Vue({
    el:'#vue-app',
    data:{
      a:0,
      b:0,
      age:20
    },
  methods:{
    // addToA:function(){
      // console.log("Add To A");
      // return this.a + this.age;
    // },
    // addToB:function(){
      // console.log("Add To B");
      // return this.b + this.age;
    // }
 
  },
  computed:{
    addToA:function(){
      console.log("Add To A");
      return this.a + this.age;
    },
    addToB:function(){
      console.log("Add To B");
      return this.b + this.age;
    }
   }
  })
</script>
 
第二 Vue动态绑定class样式:  v-bind:class="{changeColor:changeColor}"  这种方式我理解的是有参数时候会用大括号的形式。

              v-bind:class="compareClass"   没有大括号的这种是直接调用某个属性名字
<!-- vue-app是根容器 -->
<div id="vue-app">
  <h1>动态绑定 css class</h1>
  <h2>示例1</h2>
  <!-- 动态改变颜色,首先添加一个class,点击的时候改变changeColor的状态,取反。就能实现点击切换颜色 -->
  <div v-on:click="changeColor = !changeColor" v-bind:class="{changeColor:changeColor}">
    <span>韩艳红</span>
  </div>
  <h2>示例2</h2>
  <button v-on:click="changeColor = !changeColor">改变颜色</button>
  <button v-on:click="changeLength = !changeLength">改变长度</button>
  <!-- 利用动态属性实现修改颜色功能 所有写在标签上的属性或者事件里面的名字都不用加{}大括号,如果有参数得话,就需要添加大括号了 -->
  <div v-on:click="changeLength = !changeLength" v-bind:class="compareClass"> 利用动态属性实现修改颜色功能
  <span>学习Vue</span>
</div>
//实例化
new Vue({
  el:'#vue-app',
  data:{
    changeColor:false,
    changeLength:false
  },
 
  computed:{
    compareClass:function(){
    // 返回一个对象,里面有当前的颜色和长度
    return{
      changeColor:this.changeColor,
      changeLength:this.changeLength
    }
  }
}
})
第三Vue的v-if和v-for的运用:
 
v-show 和 v-if的功能是一样的。
<!-- 点击为真的话,这句话是存在的,如果为假就不存在了,说明是没有占位符的。 -->
<p v-if="erro">网络连接错误,404</p>
<p v-else-if="success">网络连接成功,200</p>
<!-- v-show和v-if的区别就是v-show是存在占位符的,它只是display:none;用样式控制了显示和隐藏。 -->
<p v-show="erro">网络连接错误,404</p>
<p v-show="success">网络连接成功,200</p>
script里面设置了:
data:{
erro:false,
success:false
},
 
v-for实例: v-for="(items index) in user"
<!-- 用v-for遍历循环数组字符串 -->
<ul>
<li v-for="character in characters">
{{character}}
</li>
</ul>
<!-- 用v-for遍历循环数组对象 -->
<ul>
<li v-for="user in user">
name:{{user.name}}
age:{{user.age}}
</li>
</ul>
<!-- 取用户的下标 在里面可以再添加一个参数index-->
<ul>
<li v-for="(user,index) in user">
{{index}} name:{{user.name}}
age:{{user.age}}
</li>
</ul>
<!-- 如果用div循环的话,会有资源浪费的问题。会生成很多个无用的div -->
<div v-for="(user,index) in user">
<h3>{{index}}.{{user.name}}</h3>
<p> age:{{user.age}}</p>
</div>
<!-- 优化div,把无用的div去掉 template就不会被渲染出来-->
<template v-for="(user,index) in user">
<h3>{{index}}.{{user.name}}</h3>
<p> age:{{user.age}}</p>
</template>
-------------------------------------------------------------
<!-- 循环这个数组 -->
<template v-for="(user,index) in user">
<!-- 再循环数组里面的单个对象 -->
<div v-for="(val,key) in user">
<p>
{{key}} —— {{val}}
</p>
</div>
</template>
scritp里面:
data:{
characters:["a","b","c"],
user:[
{name:"lili",age:20},
{name:'pipi',age:25},
{name:'tete',age:18}
]
},
新版的vue里面v-for如果不提供key值得话加载慢,而且会报红,如何解决?
遍历得时候都给他一个key值,这样就没问题了。
<!-- 如果用div循环的话,会有资源浪费的问题。会生成很多个无用的div -->
<div v-for="(user,index) in user" :key="index">
<h3>{{index}}.{{user.name}}</h3>
<p> age:{{user.age}}</p>
</div>
 
好啦,今天大致就学了这么多,还有一个综合性的小练习。虽然学了这么点,但是很多在写例子的时候还是想不起来怎么,还有逻辑能力也有待提高。慢慢来,加油。
 

Vue学习记录第二天的更多相关文章

  1. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  2. Vue学习记录第一天

    今天开始了Vue的学习,下面我就记录一下学习了什么. 1.什么是Vue? vue是一套基于javaScript的渐进式框架,是MVVM框架.View ——ViewModel——Model  其中Vie ...

  3. vue学习记录:vue引入,validator验证,数据信息,vuex数据共享

    最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <temp ...

  4. [20190614]webpack+vue学习记录

    本文记录一些学习webpack+vue相关的知识点,方便以后查阅,添加或修改 1. 初始化vue项目的代码结构 build--项目依赖包配置信息 config--项目配置文件 dev.env.js-- ...

  5. vue学习记录④(路由传参)

    通过上篇文章对路由的工作原理有了基本的了解,现在我们一起来学习路由是如何传递参数的,也就是带参数的跳转. 带参数的跳转,一般是两种方式: ①.a标签直接跳转. ②点击按钮,触发函数跳转. 在上篇文章中 ...

  6. Vue学习记录(二)

    一.指令 指令是Vue.js中一个重要的特性,主要提供了一种机制将数据的变化映射为DOM行为.当数据变化时,指令会依据设定好的操作对DOM进行修改,这样就可以只关注数据的变化,而不用去管理DOM的变化 ...

  7. Vue学习记录(一)

    一.引入js文件(直接采用CDN): http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js 二.简单实例: (1)HTML代码: &l ...

  8. Vue学习记录-初探Vue

    写在开头 2017年,部门项目太多,而且出现了一个现象,即:希望既要有APP,也能够直接扫码使用,也能放到微信公众号里面. 从技术角度来说,APP我们可以选择原生开发,也可以选择ReactNative ...

  9. vue学习记录(一)—— vue开发调试神器vue-devtools安装

    网上有些贴子少了至关重要的一步导致我一直没装上, 切记!!install后还需build,且install和build都在vue-devtools文件夹内执行 github下载地址 点击跳转 具体步骤 ...

随机推荐

  1. 【原创】大叔问题定位分享(13)HBase Region频繁下线

    问题现象:hive执行sql报错 select count(*) from test_hive_table; 报错 Error: java.io.IOException: org.apache.had ...

  2. lua 调用参数报错(a userdata value)

    本来想用这种方式统一安全删除node,后来发现参数变成(a userdata value),所以不能用下面这个方式做 方法如下: function RemoveNodeSafe(node) if no ...

  3. UVA1513 Movie collection

    传送门 题意 KI先生有收集大量小电影的习惯, 他把他的珍藏理成一大摞.无论何时他想观看这一些电影的一部,他从这一摞电影中找出这一部电影,小心地将其拿出,以确保这一摞电影不会倒塌. 自从那一摞电影变得 ...

  4. git生成ssh key步骤并添加到github网站

    0: 查看是否已经有了ssh密钥 执行命令:cd ~/.ssh 如果没有密钥则不会有此文件夹,有则备份删除 1:使用 Git Bash生成新的ssh key ssh-keygen -t rsa -C  ...

  5. linux基础命令学习笔记(一)

    2019年4月1日: “目录” = “文件夹” 常用命令(一): 1.ls: list 列表,默认当前文件夹的文件和目录 linux:命令+选项+参数 ls -l:长输出,列出文件的详细信息 - rw ...

  6. Python_多线程threading模块

    python 在执行的时候会淡定的在CPU上只允许一个线程运行,故Python在多核CPU的情况下也只能发挥出单核的功能,其中的原因:gil锁 gil 锁 (全局解释器锁):每个线程在执行时都需要先获 ...

  7. 关于pyCharm专业版的破解方法

    用pycharm编写自动化脚本时,pycharm专业版的使用期限只有30天, 找到了pycharm破解方法. 破解码:{"licenseId":"145446792566 ...

  8. Hierarchical clustering:利用层次聚类算法来把100张图片自动分成红绿蓝三种色调—Jaosn niu

    #!/usr/bin/python # coding:utf-8 from PIL import Image, ImageDraw from HierarchicalClustering import ...

  9. 20172328 2018-2019《Java软件结构与数据结构》第一周学习总结

    20172328 2018-2019<Java软件结构与数据结构>第一周学习总结 概述 Generalization 本周学习了软件质量.数据结构以及算法分析的具体内容,主要依托于所用教材 ...

  10. MAC下 mySQL及workbench安装

    1.首先去mysql 网站下载安装包,https://dev.mysql.com/downloads/mysql/ 选择第一个.dmg格式的下载安装 2.安装完成后,在System Preferenc ...