一、Vue介绍

1、什么是vue

  1. 通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，
  2. 可以独立完成前后端分离式web项目的渐进式JavaScript框架

2、为什么要学vue

  1. 三大主流框架之一：Angular React Vue
  2. 先进的前端设计模式：MVVM
  3. 可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发

3、vue特点（优点）

  1. 单页面web应用:高效
  2. 数据驱动:从数据出发，不是从DOM出发
  3. 数据的双向绑定:数据是具有监听机制
  4. 虚拟DOM:页面缓存

二、Vue实例成员

  1. 使用：
  2.     下载vue.js：https://vuejs.org/js/vue.js
  3.     在要使用vue的html页面通过script标签引入
  4.     在html中书写挂载点的页面结构，用id表示
  5.     在自定义的script标签实例化Vue对象，传入一个大字典
  6.     在字典中通过 el与挂载点页面结构绑定，data为其通过数据
  7.  
  8. 包括：
  9.     el:实例
  10.     data：数据
  11.     methods：方法
  12.     computed：计算
  13.     watch：监听
  14.     delimiters：分隔符

1、成员之el（挂载点）和data（数据）

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vue初识</title>
  6.  
  7. </head>
  8. <body>
  9.  
  10.     <div id="main">
  11.         // {{ vue变量 }} 插值表达式
  12.         <h1>{{ msg_h1 }}</h1>
  13.         <h2>{{ msg_h2 }}</h2>
  14.     </div>
  15.  
  16. </body>
  17.  
  18. <script src="js/vue.js"></script>
  19.  
  20. <script>
  21.     // 控制两个实例,通过大标签包含h1和h2
  22.     new Vue({
  23.         el: '#main', // 挂载点
  24.         data: {  // 为挂载点的页面结构提高数据
  25.             msg_h1: 'h1的内容',
  26.             msg_h2: 'h2的内容',
  27.         }
  28.     })
  29.  
  30. </script>
  31. </html>

2、成员之methods：方法

操作简单事件
操作简单样式

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>模板</title>
  6. </head>
  7. <body>
  8.  
  9. <div id="app">
  10.     <p v-on:click="btnClick" v-bind:style="v_style">点击文字颜色变为绿色</p>
  11. </div>
  12. </body>
  13.  
  14. <script src="js/vue.js"></script>
  15. <script>
  16.     new Vue({
  17.         el: '#app',
  18.         data: {
  19.             v_style: {
  20.                 color: 'block'
  21.             }
  22.         },
  23.         methods: {
  24.             btnClick: function () {
  25.                 this.v_style.color = 'green'
  26.             }
  27.         }
  28.     })
  29. </script>
  30. </html>

3、成员之computed：计算

　　监听方法内所有的变量，返回值给绑定的变量，该变量无需在data中声明

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>模板</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <p>
  10.         姓:<input type="text" v-model="first_name">
  11.         名:<input type="text" v-model="last_name">
  12.     </p>
  13.     <p>姓名:<b>{{ full_name }}</b></p>
  14. </div>
  15. </body>
  16. <script src="js/vue.js"></script>
  17. <script>
  18.     new Vue({
  19.         el: '#app',
  20.         data: {
  21.             first_name: '',
  22.             last_name: '',
  23.         },
  24.         computed: {
  25.             // 1.在computed中定义的变量的值等于绑定的函数的返回值
  26.             // 2.绑定的函数中出现的所有vue变量都会被监听
  27.             full_name: function () {
  28.                 // this代表该vue实例
  29.                 return this.first_name + this.last_name
  30.             }
  31.         }
  32.     })
  33. </script>
  34. </html>

4、成员之watch：监听

　　监听绑定的变量，绑定的变量必须在data中声明

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>模板</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <p>姓名：<input type="text" v-model="full_name"></p>
  10.     <p>
  11.         姓：<b>{{ first_name }}</b>
  12.         名：<b>{{ last_name }}</b>
  13.     </p>
  14. </div>
  15. </body>
  16. <script src="js/vue.js"></script>
  17. <script>
  18.     new Vue({
  19.         el: '#app',
  20.         data: {
  21.             full_name: '',
  22.             first_name: '',
  23.             last_name: ''
  24.         },
  25.         watch: {
  26.             full_name: function () {
  27.                 let res = this.full_name.split('');
  28.                 this.first_name = res[0];
  29.                 this.last_name = res[1];
  30.             }
  31.         }
  32.     })
  33. </script>
  34. </html>

5、delimiters：分隔符

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>模板</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     ${ msg }
  10. </div>
  11. </body>
  12. <script src="js/vue.js"></script>
  13. <script>
  14.     new Vue({
  15.         el: '#app',
  16.         data: {
  17.             msg: '123'
  18.         },
  19.         delimiters: ['${', '}']
  20.     })
  21. </script>
  22. </html>

三、Vue指令

1、文本指令

　　v-text，v-html，v-once

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>模板</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!--插值表达式就是v-text的简写-->
  10.     <p>{{ msg1 }}</p>
  11.     <p v-text="msg2"></p>
  12.      <!--可以解析html标签 -->
  13.     <p v-html="msg3"></p>
  14.     <!-- 必须赋初值，渲染的结果永远不会发生改变 -->
  15.     <p v-once="msg3"  v-on:mouseover="action">{{ msg3 }}</p>
  16. </div>
  17. </body>
  18. <script src="js/vue.js"></script>
  19. <script>
  20.     new Vue({
  21.         el: '#app',
  22.         data: {
  23.             msg1: '**msg1**',
  24.             msg2: '<b>**msg2**</b>',
  25.             msg3: '<b>**msg3**</b>',
  26.         },
  27.         methods: {
  28.             action: function () {
  29.                 // var msg = this.$data.msg4;
  30.                 this.msg3 = '<i>**new msg3**</i>';  // 把msg3由粗体改为斜体
  31.             }
  32.         }
  33.     })
  34. </script>
  35. </html>

2、事件指令

　　v-on：事件名="函数名" 可以简写为：@事件名="函数名"

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>模板</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!-- v-on:事件名="函数名"  可以简写为 @事件名="函数名"（v-on: => @）-->
  10.     <p v-on:click="action1">{{ msgs[0] }}</p>
  11.     <p @click="action2">{{ msgs[1] }}</p>
  12.  
  13.     <!--事件的传参-->
  14.     <ul>
  15.         <li @click="liAction(100)">列表项1</li>
  16.         <li @click="liAction(200)">列表项2</li>
  17.         <li @click="liAction(300)">列表项3</li>
  18.     </ul>
  19.  
  20.     <!--鼠标事件的对象,直接写函数名，默认将鼠标事件对象传入-->
  21.     <div @click="func1">func1</div>
  22.     <!-- 鼠标事件的对象：一旦添加(),就必须手动传参，$event就代表鼠标事件对象 -->
  23.     <div @click="func2($event, 'abc')">func2</div>
  24.  
  25. </div>
  26. </body>
  27. <script src="js/vue.js"></script>
  28. <script>
  29.     new Vue({
  30.         el: '#app',
  31.         data: {
  32.             msgs:['111', '222']
  33.  
  34.         },
  35.         methods: {
  36.             action1: function () {
  37.                 alert(this.msg[0])
  38.             },
  39.             action2: function () {
  40.                 alert(this.msg[1])
  41.             },
  42.             liAction: function (num, msg) {
  43.                  console.log(num, msg)
  44.             },
  45.             func1:function (ev) {
  46.                 console.log(ev)
  47.             },
  48.             func2:function (ev, msg) {
  49.                 console.log(ev);
  50.                 console.log(msg)
  51.             }
  52.         }
  53.     })
  54. </script>
  55. </html>

3、属性指令

　　v-bind：属性名='变量' (v-bind可以简写为 ：)

　　用vue绑定属性，将属性内容交给vue处理

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>模板</title>
  6.     <style>
  7.         .rDiv {
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: red;
  11.         }
  12.         .gDiv {
  13.             width: 500px;
  14.             height: 500px;
  15.             background-color: green;
  16.         }
  17.         .br {
  18.             border-radius: 50%;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23. <div id="app">
  24.     <!--属性指令:用vue绑定属性，将属性内容交给vue处理-->
  25.     <!--语法:v-bind:属性名='变量' (v-bind可以简写为 :)-->
  26.     <p class="" style="" v-bind:owen="oo" :jason="jj"></p>
  27.  
  28.     <!--class属性-->
  29.     <p :class="c1" @click="action1"></p>  <!--单类名-->
  30.     <p :class="[c1, c2]" ></p>  <!--双类名-->
  31.     <p :class="[c1, 'br']" ></p>  <!--'br' 固定写死的数据，不再是变量-->
  32.  
  33.     <!--style属性-->
  34.     <!-- 一个变量：该变量值为{},{}内部完成一个个属性的设置 -->
  35.     <p class="gDiv" :style="s1">123</p>
  36.     <!-- 一个{}：{}内一个个属性有一个个变量单独控制 -->
  37.     <p class="gDiv" :style="{fontSize:f, color:c}">456</p>
  38.  
  39. </div>
  40. </body>
  41. <script src="js/vue.js"></script>
  42. <script>
  43.     new Vue({
  44.         el: '#app',
  45.         data: {
  46.             oo: 'Owen',
  47.             jj: 'Jason',
  48.             c1: 'rDiv',
  49.             c2: 'br',
  50.             s1: {
  51.                 fontSize: '100px',
  52.                 color: 'pink'
  53.             },
  54.             f: '200px',
  55.             c: 'orange'
  56.         },
  57.         methods: {
  58.             action1: function () {
  59.                 if (this.c1 == 'rDiv'){
  60.                     this.c1 = 'gDiv'
  61.                 }else {
  62.                     this.c1 = 'rDiv'
  63.                 }
  64.             }
  65.         }
  66.     })
  67. </script>
  68. </html>

4、表单指令

　　v-model="变量"

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>模板</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!--表单指令:v-model="变量"-->
  10.     <form action="">
  11.         <!--下面两个input框双向绑定-->
  12.         <p><input type="text" v-model="val"></p>
  13.         <p><input type="text" v-model="val"></p>
  14.         <!-- 单选框 v-model绑定的变量是单选框中某一个input的value -->
  15.         <p>
  16.             男: <input v-model="r_val" value="male" type="radio" name="sex">
  17.             女: <input v-model="r_val" value="female" type="radio" name="sex">
  18.         </p>
  19.  
  20.         <!-- 复选框 v-model绑定的变量是一个列表，列表存放0到任一个复选框的value  -->
  21.         <p>
  22.             男: <input v-model="c_val" value="m" type="checkbox" name="h">
  23.             女: <input v-model="c_val" value="f" type="checkbox" name="h">
  24.             哇塞: <input v-model="c_val" value="mf" type="checkbox" name="h">
  25.         </p>
  26.         <button type="submit">提交</button>
  27.     </form>
  28. </div>
  29. </body>
  30. <script src="js/vue.js"></script>
  31. <script>
  32.     new Vue({
  33.         el: '#app',
  34.         data: {
  35.             val: '',
  36.             r_val: 'female',
  37.             c_val: []
  38.         }
  39.     })
  40. </script>
  41. </html>

5、条件指令

　　v-show， v-if， v-else-if， v-else

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>模板</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <p v-if="r1" key="p_r1">if条件</p>
  10.     <p v-show="r2">show条件</p>
  11.     {{ num + 1 - 1 * 2 + '好的'}}
  12.  
  13.     <ul>
  14.         <!--v-else会默认与v-if等有条件的分支绑定,当v-if成立的时候，就不会执行下面的-->
  15.         <!--v-else-if必须由条件才和有条件v-if分支绑定，当v-else-if成立时就不会执行下面的-->
  16.         <!--前面两者都不成立时才会执行v-else-->
  17.         <li v-if="tag==1">111</li>
  18.         <li v-else-if="tag==2">222</li>
  19.         <li v-else>333</li>
  20.     </ul>
  21.  
  22.     <ul>
  23.         <li @click="action('a')">a</li>
  24.         <li @click="action('b')">b</li>
  25.         <li @click="action('c')">c</li>
  26.     </ul>
  27.     <ul>
  28.         <li v-show="flag=='a'">aaa</li>
  29.         <li v-show="flag=='b'">bbb</li>
  30.         <li v-show="flag=='c'">ccc</li>
  31.     </ul>
  32. </div>
  33. </body>
  34. <script src="js/vue.js"></script>
  35. <script>
  36.     new Vue({
  37.         el: '#app',
  38.         data: {
  39.             num: 10,
  40.             r1: true,
  41.             r2: false,
  42.             tag: 2,
  43.             flag: 'a'
  44.         },
  45.         methods: {
  46.             action: function (s) {
  47.                 this.flag = s
  48.             }
  49.         }
  50.     })
  51. </script>
  52. </html>

6、循环指令

　　v-for

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>模板</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!-- 循环指令:v-for -->
  10.     <!--列表:注意值在前面，索引在后面-->
  11.     <ul>
  12.         <li v-for="(num, index) in nums">{{ num }}{{ index }}</li>
  13.     </ul>
  14.  
  15.     <!--字典-->
  16.     <ul>
  17.         <li v-for="(v, k, i) in info">{{ v }}{{ k }}{{ i }}</li>
  18.     </ul>
  19. </div>
  20. </body>
  21. <script src="js/vue.js"></script>
  22. <script>
  23.     new Vue({
  24.         el: '#app',
  25.         data: {
  26.             nums: [5, 3, 2, 1, 4 ,6],
  27.             info: {
  28.                 'name': 'jason',
  29.                 'age': 28,
  30.                 'gender': 'male'
  31.             }
  32.         }
  33.     })
  34. </script>
  35. </html>

7、评论案例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>模板</title>
  6.     <style>
  7.         span {
  8.             margin-left: 100px;
  9.             cursor: pointer;
  10.             color: green;
  11.         }
  12.         span:hover {
  13.             color: red;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18. <div id="app">
  19.     <p>
  20.         <input type="text" v-model="val">
  21.         <button @click="add">评论</button>
  22.     </p>
  23.  
  24.     <ul>
  25.         <li v-for="(info, i) in infos">
  26.             {{ info }}
  27.             <span @click="del(i)">x</span>
  28.         </li>
  29.     </ul>
  30.  
  31. </div>
  32. </body>
  33. <script src="js/vue.js"></script>
  34. <script>
  35.     l = [1, 2, 3];
  36.     // splice: 从哪个索引开始 操作的位数 操作的结果
  37.     l.splice(0, 0, 0, 1, 2, 3);
  38.     console.log(l)
  39. </script>
  40. <script>
  41.     new Vue({
  42.         el: '#app',
  43.         data: {
  44.             infos: [],
  45.             val: ''
  46.         },
  47.         methods: {
  48.             del: function (i) {
  49.                 // splice: 从哪个索引开始 操作的位数 操作的结果(可变长)
  50.                 this.infos.splice(i, 1)
  51.             },
  52.             add: function () {
  53.                 let val = this.val;
  54.                 if (val){
  55.                     this.infos.splice(0, 0, val);
  56.                     this.val = ''
  57.                 }
  58.             }
  59.         }
  60.     })
  61. </script>
  62. </html>

Vue成员与指令介绍的更多相关文章

  1. 新人成长之入门Vue.js常用指令介绍（一）

    写在前面 作为一个刚步入职场工作的新人,对于公司中所用的技术和框架基本上不懂,只能从最基础的开始做起,进入公司接触的第一个框架就是前端框架Vue.js,几个功能做下来,觉得Vue.js首先学习起来真的 ...

  2. vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

    第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...

  3. Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  4. Vue(九) 自定义指令

    前面介绍了许多 Vue 内置的指令,比如 v-if.v-show等,这些丰富的指令能满足我们绝大部分的业务需求,不过在需要一些特殊功能时,我们仍然希望对 DOM 进行底层的操作,这时就要用到自定义指令 ...

  5. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  6. vue.js常用指令

    本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...

  7. 【Vue】vue.js常用指令

    http://www.cnblogs.com/rik28/p/6024425.html Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会 ...

  8. Vue中基本指令用法

    指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...

  9. Vue 3自定义指令开发

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 什么是指令(directive) 在Angular和Vue中都有Direct ...

随机推荐

  1. 平衡树（Splay、fhq Treap）

    Splay Splay(伸展树)是一种二叉搜索树. 其复杂度为均摊\(O(n\log n)\),所以并不可以可持久化. Splay的核心操作有两个:rotate和splay. pushup: 上传信息 ...

  2. Java switch case 语句

    switch case 语句判断一个变量与一系列值中某个值是否相等,每个值称为一个分支. 语法 switch(expression){ case value : //语句 break; //可选 ca ...

  3. 【Tomcat】热部署的遗留配置导致服务器无法启动

    1.问题描述: 今天用myeclipse写了个小demo,然后用Tomcat7 部署了,接着点击启动服务器,服务器居然报错: 严重: Error starting static Resources j ...

  4. linux centos 安装mongoDB

    1.下载mongoDB 例如下载3.2.19 64位版本 https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-3.2.19.tgz ...

  5. 25 Python之模块与包

    一.模块   模块就是一个包含了python定义和申明的文件,文件名就是模块的名字加上.py的后缀/ 模块的分类:     1.使用python编写的py文件     2.已被编译位共享库或者DLL或 ...

  6. 07 Nginx负载均衡

    1.负载均衡的实现. 1.准备三台虚拟机,比如 192.168.119.146 提供资源 192.168.119.147 提供nginx的负载均衡 192.168.119.148 提供资源 2.分别配 ...

  7. 最简单的方式实现rem布局

    加上如下js,px转换成rem需要手动,计算方式:量的大小除以100,就等于rem,例如:量的设计稿元素宽度是120,那么就写成{width: 1.2rem},这样写有什么问题,待研究,也欢迎补充 & ...

  8. 关于的 let 关键字的一个小问题

    刚才在看阮一峰老师的<ES6标准入门>,在介绍 let 那一段时有这么一段话 我就自己在控制台试了一下这段代码,输出果然的是"abc",于是我就把代码稍微修改了下 也没 ...

  9. 服务命令（systemctl的使用）

    常用的service与systemctl命令的对比 应用举例: ●start:开启服务 ●stop:停止服务 ●status:参数来查看服务运行情况 ●restart:重新加载服务 应用举例·: #启 ...

  10. Jansson库的使用简介

    一.Jansson的安装: 二.jansson相关的API: https://jansson.readthedocs.io/en/latest/apiref.html#c.json_t string ...