文档章节

Vue快速学习_第一节

SEOwhywhy
 SEOwhywhy
发布于 07/13 09:52
字数 1703
阅读 2
收藏 0

  之前写CRM都是Django前后端一起写的,在大部分项目中实际上前后端是分离的,因此我们需要学习一个前端框架来进行前端页面的编写,这里选择了Vue进行学习,好了开始学习吧.
  
  1.ES6部分知识点学习
  
  let: 与var不同,var存在变量提升问题
  
  特点:
  
  1.局部作用域
  
  2.不会存在变量提升
  
  3.变量不能重复声明
  
  const: 常量声明
  
  特点:
  
  1.局部作用域
  
  2.不会存在变量提升
  
  3.不能重复声明,只声明常量 不可变的量
  
  模板字符串
  
  // 通过反引号 ${变量名}来插值
  
  let name = 'liu';
  
  let res = `我是${name}`;
  
  console.log(res);    ---> 我是liu
  
  箭头函数
  
  复制代码
  
  // 箭头函数等同于add1 = function(x, y){return x+y;}
  
  let add1 = (x, y) => {
  
  return x+y;
  
  };
  
  // 更简单的使用
  
  let add2 = (x, y) => x+y;
  
  console.log(add1(3,2));         ---> 5
  
  console.log(add2(3,2));         ---> 5
  
  复制代码
  
  对象的单体模式(一般都用这种)
  
  复制代码
  
  // 这是对象中使用箭头函数,此时的this指向的是person的父级对象(上下文,window)
  
  var person1 = {
  
  name: 'liu',
  
  age: '20',
  
  fav: () => {
  
  console.log(this);
  
  }
  
  };
  
  person1.fav();        --->  Window {postMessage: ?, blur: ?, focus: ?, close: ?, parent: Window, …}
  
  // 为了解决箭头函数this指向的问题 推出来一种写法 对象的单体模式, 此时的this指向的是person对象
  
  var person2 = {
  
  name: 'liu',
  
  age: '20',
  
  fav(){
  
  console.log(this);
  
  }
  
  };
  
  person2.fav();    --->  {name: "liu", age: "20", fav: ?}
  
  复制代码
  
  面向对象(ES6的类)
  
  复制代码
  
  // 基于原型的模式创建对象(prototype,继承当前父类)
  
  function Person1(name,age){
  
  this.name = name;
  
  this.age = age;
  
  }
  
  Person1.prototype.showName = function(){
  
  console.log(this.name);
  
  };
  
  var p1 = new Person1('liu', 18);
  
  p1.showName();
  
  class Person2{
  
  // 构造器  当你创建实例的时候 constructor()方法会立刻调用 通常这个方法初始化对象的属性,类似py的__init__方法
  
  constructor(name,age){
  
  this.name = name;
  
  this.age = age;
  
  }
  
  showName(){
  
  console.log(this.name);
  
  }
  
  }
  
  var p2 = new Person2('liu', 18);
  
  p2.showName();
  
  复制代码
  
  2.Vue的基础使用
  
  vue下载及引包(刚开始学习建议先这样)
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  
  // 在html中引入:
  
  <script src='./vue.js'></script>
  
  简单Vue实例化及模板语法
  
  复制代码
  
  // 模板语法, 可以插入任何你想插入的内容,除了if-else if-else用三元运算符代替
  
  <div id="box">
  
  <!--模板语法(内部不能写if else if-else用三元运算符代替)-->
  
  <!--去data中找到msg的值展示在页面-->
  
  <h3>{{ msg }}</h3>
  
  <!--直接运算得到结果展示在页面上-->
  
  <h3>{{ 1+2+3 }}</h3>
  
  <!--字符,对象都能直接被渲染到页面-->
  
  <h3>{{ {name: 'xiaohua'} }}</h3>
  
  <!--取出person对象的属性name值-->
  
  <h3>{{ person.name }}</h3>
  
  <!--三元运算符计算-->
  
  <h3>{{ 1>2?'对':'错' }}</h3>
  
  <!--翻转字符串,得到nohtyp evol,证明{{}}中可以使用js语法-->
  
  <h3>{{ str1.split('').reverse().join('') }}</h3>
  
  </div>
  
  复制代码
  
  复制代码
  
  // 实例化Vue
  
  new Vue({
  
  el: '#box',  // 绑定id为box的标签,固定写法el
  
  data:{
  
  msg: '测试',
  
  str1: 'love python',
  
  person:{
  
  name: 'liu',
  
  age: 18
  
  }
  
  }
  
  })
  
  复制代码
  
  Vue的指令系统之v-text和v-html
  
  v-text相当于innerText
  
  v-html相当于innerHTML
  
  <!--直接将msg当成字符串读取展示-->
  
  <div v-text="msg"></div>
  
  <!--读取后解析成标签展示,这个比较常用-->
  
  <div v-html="msg"></div>
  
  复制代码
  
  new Vue({
  
  el: '#box',
  
  data(){
  
  // data中是一个函数,函数返回一个对象,可以为空,但必须返回
  
  return {
  
  msg: "<h4>你好</h4>"
  
  }
  
  }
  
  })
  
  复制代码
  
  Vue的指令系统之v-if和v-show,还有个v-else
  
  复制代码
  
  <div id="box">
  
  <!--执行add方法并将值展示在页面-->
  
  {{ add(1, 2) }}
  
  <!--给button按钮绑定click事件,方法是changeShow-->
  
  <button v-on:click = 'changeShow'>点击显示隐藏</button>
  
  <!--isShow为true就显示,为false就隐藏-->
  
  <div class="t1" v-show="isShow"></div>
  
  <!--官网例子,如果随机数大于0.5就显示Now you see me, 否则就显示Now you don't-->
  
  <div v-if="Math.random() > 0.5">
  
  Now you see me
  
  </div>
  
  <div v-else>
  
  Now you don't
  
  </div>
  
  </div>
  
  复制代码
  
  复制代码
  
  // 数据驱动视图
  
  new Vue({
  
  el: '#box',
  
  data(){
  
  return{
  
  isShow: true
  
  }
  
  },
  
  // 方法都在这里面定义
  
  methods: {
  
  add(x, y){
  
  return x+y
  
  },
  
  changeShow(){
  
  // 点击按钮就取反然后赋值,所以点击就是一直显示隐藏
  
  this.isShow = !this.isShow
  
  }
  
  }
  
  })
  
  复制代码
  
  v-if和v-show 等于 true都是表示显示,false表示隐藏,那区别是啥呢?
  
  复制代码
  
  v-if vs v-show
  
  v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
  
  v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
  
  相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
  
  一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,
  
  则使用 v-show 较好(也可以通过增加class或删除class实现);如果在运行时条件很少改变,则使用 v-if 较好。
  
  复制代码
  
  上面是官网说法,实际上简单来讲就是v-show就是改变display属性,而v-if则是对dom的创建和删除.
  
  Vue的指令系统之v-bind和v-on
  
  v-bind可以绑定标签中任何属性 比如:img标签的src,a标签的href,id,class,name等
  
  v-on 可以监听 js中所有事件
  
  简写:
  
  v-bind:src  等价于   :src
  
  v-on:click 等价于 @click
  
  复制代码
  
  <!DOCTYPE html>
  
  <html lang="en">
  
  <head>
  
  <meta charset="UTF-8">
  
  <title>Title</title>
  
  <style>
  
  .t1{
  
  width: 200px;
  
  height: 200px;
  
  background-color: #ff0000;
  
  }
  
  .active{
  
  background-color: #0f0;
  
  }
  
  </style>
  
  </head>
  
  <body>
  
  <div id="box">
  
  <!--第一种写法-->
  
  <!--<button v-on:mouseenter="changeGreen" v-on:mouseLeave="changeRed">改变颜色</button>-->
  
  <!--绑定src和alt属性,使用从服务器返回的动态数据-->
  
  <!--<img v-bind:src="imgSrc" v-bind:alt="imgAlt">-->
  
  <!--如果isActive为true就把active加到class里面,为false就不加-->
  
  <!--<div class="t1" v-bind:class="{active:isActive}"></div>-->
  
  <!--第二种简写,以后都用简写-->
  
  <button @mouseenter="changeGreen" @mouseLeave="changeRed">改变颜色</button>
  
  <!--绑定src和alt属性,使用从服务器返回的动态数据-->
  
  <img :src="imgSrc" :alt="imgAlt">
  
  <!--如果isActive为true就把active加到class里面,为false就不加-->
  
  <div class="t1" :class="{active:isActive}"></div>
  
  </div>
  
  </body>
  
  <script src="vue.js"></script>
  
  <script>
  
  //数据驱动视图  设计模式 MVVM  Model(数据)  View(前端展示)  ViewModel(类似v-bind方法)
  
  new Vue({
  
  el: '#box',
  
  data(){
  
  // img相关的动态数据
  
  return {
  
  imgSrc: "timg.jpg",
  
  imgAlt: '图片',
  
  isActive: true,
  
  }
  
  },
  
  methods: {
  
  // 鼠标进入离开的执行方法
  
  changeGreen(){
  
  this.isActive = false;
  
  },
  
  changeRed(){
  
  this.isActive = true;
  
  }
  
  }
  
  })
  
  </script>
  
  </html>

© 著作权归作者所有

SEOwhywhy
粉丝 8
博文 152
码字总数 335019
作品 0
私信 提问
你可能需要的一本前端小册:Vue 项目构建与开发入门

最近抽时间写了一本关于 Vue 的小册:《Vue 项目构建与开发入门》,前前后后断断续续花了大概两个月的时间。作为 Vue 的第一批用户,同时也作为一名专栏作者,虽然我之前写过好几篇关于 Vue ...

劳卜
2018/11/28
0
0
Vue-rap 1.0.0 正式发布: 构建基于 Vue 的流应用

前几年前端还是 html+css+js 简单的配合,还记得那几年公司招前端要求很低,工资开的也低,前端需要学习的东西很低,一个新人(特别是刚出来的应届毕业生)只需要简单的培训下就可以快速进入公司前...

景颢
2018/03/17
4.8K
17
vue入门环境搭建及demo运行

vue简介: Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时,V...

挑战者666888
2018/05/22
0
0
Vue-Rap v1.1.1发布:构建基于 Vue 的流应用

Rap进行第二次更新,本次更新还是很重要的,特别是对想用 rap 做手机端应用的开发者 前言 前几年前端还是 html+css+js 简单的配合,还记得那几年公司招前端要求很低,工资开的也低,前端需要学习的...

景颢
2018/09/11
1K
3
mpvue: vuejs和小程序碰撞出来的火花

微信自推出小程序以来,热度一直居高不下,各大公司开始专门开发小程序,但是小程序自定义的wxml和wxss和自己定义的语法,让被三大框架统治的前端江湖头疼不易,因为需要专门为小程序开发一...

蜗牛老湿
2018/05/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

作为一个(IT)程序员!聊天没有话题?试试这十二种技巧

首先呢?我是一名程序员,经常性和同事没话题。 因为每天都会有自己的任务要做,程序员对于其他行业来说;是相对来说比较忙的。你会经常看到程序员在发呆、调试密密麻麻代码、红色报错发呆;...

小英子wep
今天
17
0
【SpringBoot】产生背景及简介

一、SpringBoot介绍 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程,该框架使用了特定的方式来进行配置,从而使开发人员不再需要...

zw965
今天
5
0
简述并发编程分为三个核心问题:分工、同步、互斥。

总的来说,并发编程可以总结为三个核心问题:分工、同步、互斥。 所谓分工指的是如何高效地拆解任务并分配给线程,而同步指的是线程之间如何协作,互斥则是保证同一时刻只允许一个线程访问共...

dust8080
今天
6
0
OSChina 周四乱弹 —— 当你简历注水但还是找到了工作

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @花间小酌 :#今日歌曲推荐# 分享成龙的单曲《男儿当自强》。 《男儿当自强》- 成龙 手机党少年们想听歌,请使劲儿戳(这里) @hxg2016 :刚在...

小小编辑
今天
3.5K
22
靠写代码赚钱的一些门路

作者 @mezod 译者 @josephchang10 如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。 今天给大家分享一个精彩的 GitHub 库,这个库整理...

高级农民工
昨天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部