在学习Vue的基本用法之前，我们先简单的了解一些es6的语法

let：

　　特点：1.局部作用域　　2.不会存在变量提升　　3.变量不能重复声明

const：

　　特点：1.局部作用域　　2.不会存在变量提升　　3.不能重复声明，只声明常亮，不可变的量（因为是常量所以在初始化的时候就要赋值）

模板字符串：

　　tab键上面的反引号 ${变量名}来插值

　　let name = "xiaoming"

　　let str = `我是${name}`

箭头函数

　　function(){} == () => {} this的指向发生了改变

  1.     let add = function (x) {
  2.         return x
  3.     };
  4.     console.log(add(6));
  5.  
  6.     let add = (x) => {
  7.         return x
  8.     };
  9.     console.log(add(30))

es6的类

　　原型 prototype  当前类的父类（继承性）

  1.     function Vue(name,age) {
  2.         this.name = name;
  3.         this.age = age
  4.     }
  5.     Vue.prototype.showName = function () {
  6.         console.log(this.name)
  7.     };
  8.     var vue = new Vue("xiaoming",18);
  9.     vue.showName()

Vue的介绍

　　前端的三大框架：

　　　　vue：尤雨溪，渐进式的JavaScript框架

　　　　react：Facebook公司，里面的高阶函数非常多，对初学者不友好

　　　　angular：谷歌公司，目前更新到6.0，学习angular需要typescript

　　vue的基本引入和创建

　　　　1.下载

　　　　　　cdn方式：

  1. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

　　　　2.引包

  1. <script src='./vue.js'></script>

　　　　3.实例化

  1. <div id="app">
  2.     <!--模板语法-->
  3.     <h2>{{ msg }}</h2>　　
  4.     <h3>{{ "hahaha" }}</h3>
  5.     <h3>{{ 1+1 }}</h3>
  6.     <h4>{{ {"name":"haha"} }}</h4>
  7.     <h5>{{ person.name }}</h5>
  8.     <h2>{{ 1>2? "真的":"假的" }}</h2>
  9.     <p>{{ msg2.split("").reverse().join("") }}</p>
  10.     <div>{{ text }}</div>
  11. </div>
  12. <!--引包-->
  13. <script src="./vue.js"></script>
  14. <script>
  15.     //实例化对象
  16.     new Vue({
  17.         el:"#app",//绑定标签
  18.         data:{
  19.             //数据属性
  20.             msg:"黄瓜",
  21.             person:{
  22.                 name:"xiaoming"
  23.             },
  24.             msg2:"hello Vue",
  25.             text:"<h2>日天</h2>"
  26.         }
  27.     })
  28. </script>

　　　　vue的指令v-text和v-html

　　　　　　v-text相当于innerText

　　　　　　v-html相当于innerHTML

  1. <div id="content">
  2.     {{ msg }}
  3.     <div v-text="msg"></div>
  4.     <div v-html="msg"></div>
  5. </div>
  6. <script src="vue.js"></script>
  7. <script>
  8.     new Vue({
  9.         el:"#content",
  10.         data(){
  11.             //data中是一个函数，函数中return一个对象，可以是空对象，但是不能不return
  12.             return {
  13.                 msg:"<h2>zhangqing</h2>"
  14.             }
  15.         }
  16.     })
  17. </script>

　　　　v-show：相当于 style.display

　　　　v-if：相当于创建

区别：

  1. v-if vs v-show
    v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
  2.  
  3. v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
  4.  
  5. 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
  6.  
  7. 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

　　　　v-bind和v-on

　　　　　　v-bind可以绑定标签中任何属性　　简写 ：

　　　　　　v-on可以监听 js中所有事件　　　　简写 @

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <style>
  8.         .box {
  9.             width: 200px;
  10.             height: 200px;
  11.             background-color: red;
  12.         }
  13.         .active{
  14.             background-color: green;
  15.         }
  16.  
  17.     </style>
  18. </head>
  19. <body>
  20.  
  21. <div id="app">
  22.     <!--<button v-on:click = 'handlerChange'>切换颜色</button>-->
  23.    <!--v-bind 标签中所有的属性 img标签src alt,a标签的href title id class-->
  24.     <!--<img v-bind:src="imgSrc" v-bind:alt="msg">-->
  25.     <!--<div class="box" v-bind:class = '{active:isActive}'></div>-->
  26.  
  27.      <button @mouseenter = 'handlerChange' @mouseleave = 'handlerLeave'>切换颜色</button>
  28.    <!--v-bind 标签中所有的属性 img标签src alt,a标签的href title id class-->
  29.     <img :src="imgSrc" :alt="msg">
  30.     <div class="box" :class = '{active:isActive}'></div>
  31. </div>
  32. <!--1.引包-->
  33. <script src='./vue.js'></script>
  34. <script>
  35.     //数据驱动视图  设计模式 MVVM  Model  View  ViewModel
  36.  
  37.     //声明式的JavaScript框架
  38.  
  39. //    v-bind和v-on的简便写法 :  @
  40.     new Vue({
  41.         el: '#app',
  42.         data() {
  43.             //data中是一个函数 函数中return一个对象，可以是空对象 但不能不return
  44.             return {
  45.                 imgSrc:'./1.jpg',
  46.                 msg:'美女',
  47.                 isActive:true
  48.             }
  49.         },
  50.         methods:{
  51.             handlerChange(){
  52. //                this.isActive = !this.isActive;
  53.                 this.isActive = false;
  54.             },
  55.             handlerLeave(){
  56.                 this.isActive = true;
  57.             }
  58.         }
  59.  
  60.     })
  61. </script>
  62.  
  63. </body>
  64. </html>

　　　　v-for 遍历：可以遍历列表，也可以遍历对象

　　　　　　在使用vue的v-for指令的时候，一定要绑定key，避免vue计算dom

  1. <div id="app">
  2.     <ul v-if='data.status == "ok"'>
  3.         <li v-for="(item,index) in data.users" :key="item.id">
  4.             <h3>{{ item.id }}---{{ item.name }}</h3>
  5.         </li>
  6.     </ul>
  7.     <div v-for="(value,key) in data.person" :key="index">    #遍历对象时，第一个是value，第二个是key
  8.         {{ key }} --- {{ value }}
  9.     </div>
  10. </div>
  11. <script src='./vue.js'></script>
  12. <script>
  13.     new Vue({
  14.         el:"#app",
  15.         data(){
  16.             return{
  17.                 data:{
  18.                     status:"ok",
  19.                     users:[
  20.                         {id:1,name:"alex",age:18},
  21.                         {id:2,name:"wusir",age:30},
  22.                         {id:3,name:"yuan",age:58}
  23.                     ],
  24.                     person:{
  25.                         name:"alex"
  26.                     }
  27.                 }
  28.             }
  29.         }
  30.     })
  31. </script>

　　　　watch和computed

　　　　　　watch可以监听单个属性，也可以监听多个

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <p>{{ msg }}</p>
  11.         <button @click = 'clickHandler'>修改</button>
  12.     </div>
  13.     <script src="vue.js"></script>
  14.     <script>
  15.         new Vue({
  16.             el:'#app',
  17.             data(){
  18.                 return {
  19.                     msg:"alex",
  20.                     age:18
  21.                 }
  22.  
  23.             },
  24.             methods:{
  25.                 clickHandler(){
  26.                     this.msg = "wusir"
  27.                 }
  28.             },
  29.             watch:{
  30.                 //watch单个属性，如果想监听多个属性 声明多个属性的监听
  31.                 'msg':function (value) {
  32.  
  33.                     console.log(value);
  34.  
  35.                     if (value === 'wusir'){
  36.                         alert(1);
  37.                        this.msg = '大武sir'
  38.                     }
  39.                 },
  40.                 'age' :function (value) {
  41.  
  42.                 }
  43.             }
  44.         })
  45.     </script>
  46. </body>
  47. </html>

　　　　计算属性 computed

　　　　　　监听多个属性

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7. </head>
  8. <body>
  9. <div id="app">
  10.     <p>{{ myMsg }}</p>
  11.     <button @click='clickHandler'>修改</button>
  12. </div>
  13. <script src="vue.js"></script>
  14. <script>
  15.     let vm = new Vue({
  16.         el: '#app',
  17.         data() {
  18.             return {
  19.                 msg: "alex",
  20.                 age: 18
  21.             }
  22.  
  23.         },
  24.         created() {
  25.             //定时器  ajax  库 function(){}
  26.             setInterval(() => {
  27.  
  28.             })
  29.         },
  30.         methods: {
  31.             clickHandler() {
  32.                 //this的指向就是当前对象
  33.                 this.msg = "wusir";
  34.                 this.age = 20;
  35.             },
  36.             clickHandler: function () {
  37.                 console.log(this);
  38.             }
  39.  
  40.         },
  41.         computed: {
  42.             myMsg: function () {
  43.                 //业务逻辑
  44.  
  45. //                    计算属性默认只有getter方法
  46.                 return `我的名字叫${this.msg},年龄是${this.age}`;
  47.             }
  48.         }
  49.     })
  50.  
  51.     console.log(vm);
  52. </script>
  53. </body>
  54. </html>

Vue基本用法的更多相关文章

  1. Vue props用法详解

    Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数 ...

  2. vue setTimeout用法 jquery滚动到某一个div的底部

    //vue 中setTimeOut用法 var $this = this; setTimeout(function(){ $this.goEnd() }, 10); goEnd:function(){ ...

  3. vue better-scroll用法

    滚动位置固定:在vue中通过路由切换页面时组件会自动滚动到顶部,需要监听滚动行为才能让滚动位置固定,better-scroll解决了这个问题. 常用效果:移动端很常见的效果,当滑动右边部分的时候,左边 ...

  4. vue之用法

    一.安装 对于新手来说,强烈建议大家使用<script>引入 二. 引入vue.js文件 我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数. 三.使用V ...

  5. Vue 基本用法

    Vue的基本用法 模板语法{{ }} 关闭掉 django中提供的模板语法{{ }} 指令系统 v-text v-html v-show和v-if v-bind和v-on v-for v-model ...

  6. vue插槽用法(极客时间Vue视频笔记)

    vue插槽 插槽是用来传递复杂的内容,类似方法 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. Vue.extend用法

    Vue.extend 是构造一个组件的语法器. 用法 Vue.extend ( options ),options 是对象: 使用基础Vue构造器,创建一个子类,参数是一个包含组件选项的对象,data ...

  8. vue基础用法

    vue.js是什么 vue.js也称为vue,读音/vju/ 是一个构建用户界面的框架 是一个轻量级MVVM(Model-view-viewModel)框架,和angular,react类似,其实就是 ...

  9. 杂记 -- 关于vue-router样式、vuecli引用全局js函数、vue.slot用法

    1.routerLinkTo 样式设置 首先,点击routerlink标签如下图:添加:router-link-active,router-link-exact-active两个类的样式 router ...

随机推荐

  1. linux 自动化安装系统 -KS文件

    # Kickstart file automatically generated by anaconda. installharddrive --partition=sdb2 --dir=lang e ...

  2. 透彻的掌握 Spring 中@transactional 的使用

    事务管理是应用系统开发中必不可少的一部分.Spring 为事务管理提供了丰富的功能支持.Spring 事务管理分为编码式和声明式的两种方式.编程式事务指的是通过编码方式实现事务:声明式事务基于 AOP ...

  3. c# winFrom Close报错 System.ObjectDisposedException:“无法访问已释放的对象。

    System.ObjectDisposedException:“无法访问已释放的对象. ObjectDisposed_ObjectName_Name” 查了一下发现是 InitializeCompon ...

  4. Lambda表达式和方法引用

    1 , 为什么用lambda表达式 将重复固定的代码写法简单化 2   ,lambda表达式的实质 对函数式接口的实现(一个接口中只有一个抽象方法的接口被称为函数式接口) package com.mo ...

  5. 【简记】修改Docker数据目录位置，包含镜像位置

    为啥要改? Docker安装后默认下载的位置在/var/lib/docker ,如果/var分区没有独立分出来,Linux下默认是与/根分区在一起.一般我们装Linux系统的时候,除了做邮件服务器外, ...

  6. linux 1-常用命令

    文件处理命令: 命令格式:命令 [-选项] [参数] 例如:ls -la /etc   多个选项可以写在一起,不区分前后关系,例如 -l 和 -a 一起写成 -la 目录处理命令:ls (就是list ...

  7. golang学习 ---defer语句

    golang语言defer特性详解 defer语句是go语言提供的一种用于注册延迟调用的机制,它可以让函数在当前函数执行完毕后执行,是go语言中一种很有用的特性.由于它使用起来简单又方便,所以深得go ...

  8. powershell程序

    powershell是一个命令行解释器.它输出一个字符,等待命令行的输入,然后执行这个命令.下面是powershell非常重要的命令:

  9. [K8s 1.9实践]Kubeadm 1.9 HA 高可用 集群 本地离线镜像部署

    k8s介绍 k8s 发展速度很快,目前很多大的公司容器集群都基于该项目,如京东,腾讯,滴滴,瓜子二手车,北森等等. kubernetes1.9版本发布2017年12月15日,每是那三个月一个迭代, W ...

  10. 详细的Hadoop的入门教程-单机模式 Standalone Operation

    一. 单机模式Standalone Operation 单机模式也叫本地模式,只适用于本地的开发调试,或快速安装体验hadoop,本地模式的安装比较简单,下载完hadoop安装包就可以直接运行. 1. ...