一、Vue概述

1.1 Vue是什么

Vue (读音 /vjuː/) 是一套用于构建用户界面的渐进式框架。基于js动态操作html标签的js库，Vue 也完全能够为复杂的单页应用提供驱动。火爆的前端js框架

1.2 Vue初体验

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Vue初体验</title>
  6.         <script src="https://unpkg.com/vue@next"></script>
  7.     </head>
  8.     <body>
  9.         <!-- 定义 显示标签  -->
  10.         <div id="dv01">
  11.           次数: {{ counter }}
  12.           <h1>{{msg}}</h1>
  13.         </div>
  14.         <script>
  15.         //定义数据函数对象--Model
  16.         const data = {
  17.           data() {
  18.             return {
  19.               counter: 10,
  20.               msg:"学习Vue,真开心！"
  21.             }
  22.           }
  23.         }
  24.         //将数据函数和标签对应绑定
  25.         Vue.createApp(data).mount('#dv01');
  26.         </script>
  27.     </body>
  28. </html>

使用步骤：
1.引入vue的js库
2.绘制标签div
通过{{属性名}}：文本插值，双大括号法
3.准备js代码
1.数据函数，返回值也就是数据
const 变量名= {
data() {
return {
属性名: 属性的值
}
}
}
2.实现数据函数和标签的绑定关系
Vue.createApp(变量名).mount(‘#标签的id名称’);

1.3 Vue特性

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的标签，分离和实时渲染，数据是响应式：数据只要改变，页面标签的内容也跟着一起改变。
a.数据响应式
b.文本插值，格式： {{属性名}}
c.属性绑定，格式： v-bind:属性名=”Vue中data的属性名”
d.事件绑定，格式： v-on:事件名=”Vue中函数名称”
e.双向绑定，格式：v-model=”Vue中data的属性名” ,注意：表单标签，比如input 、select、 textarea
f.分支语法，格式：v-if
g.循环语法，格式：v-for=”变量名 in Vue中data的属性名”

二、Vue基础

2.1 文本插值

  • 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
  • 无论何时，绑定的组件实例上属性 发生了改变，插值处的内容都会更新。响应式
  • 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新
  • 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用v-html指令

  • 对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.       <meta charset="utf-8">
    5.       <title>Vue特性</title>
    6.       <script src="https://unpkg.com/vue@next"></script>
    7.   </head>
    8.   <body>
    9.           <div id="dv01">
    10.               <h1>当前时间：{{ctime}}</h1>
    11.               <h1 v-once>第一次的时间：{{ctime}}</h1>
    12.               <button v-on:click="show">更新时间</button>
    13.               <div v-html="str1"></div>
    14.               <div><h1>你的性别：{{sex==1?'男':'女'}}</h1></div>
    15.               <div>{{str2.length>0?str2:'默认内容'}}</div>
    16.           </div>
    17.       <script>
    18.       //定义数据对象
    19.       const params={
    20.           data(){//数据源
    21.               return {
    22.                   ctime:new Date().toLocaleTimeString(),
    23.                   str1:"<h1>看看我，快点！</h1>",
    24.                   sex:1,
    25.                   str2:""
    26.               }
    27.           },
    28.           methods:{//函数集
    29.               show(){
    30.                   this.ctime=new Date().toLocaleTimeString();
    31.               }
    32.           }
    33.       }
    34.       //实现绑定和渲染
    35.       Vue.createApp(params).mount('#dv01');
    36.       </script>
    37.   </body>
    38. </html>

    2.2 属性绑定

  • Mustache 语法不能在 HTML attribute 中使用，然而，可以使用 v-bind指令

  • 格式： v-bind:属性名=”Vue中data的属性名”

  • v-bind:属性名 简称 :属性名 ```html <!DOCTYPE html>

  1. <a name="SFebY"></a>
  2. ### 2.3 事件绑定
  4. - 使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript
  5. - 常用事件： click dblclick change keyup
  6. - 在监听键盘事件时，Vue 允许为 v-on 或者 @ 在监听键盘事件时添加按键修饰符
  7. - 事件处理程序中可以有多个方法，这些方法由逗号运算符分隔
  8. ```html
  9. <!DOCTYPE html>
  10. <html>
  11.     <head>
  12.         <meta charset="utf-8">
  13.         <title></title>
  14.         <script src="https://unpkg.com/vue@next"></script>
  15.         <style>
  16.         .dv2{
  17.             width: 30px;
  18.             height: 30px;
  19.             background-color: red;
  20.             position: relative;
  21.             left: 10px;
  22.             top: 10px;
  23.         }
  24.         </style>
  25.     </head>
  26.     <body>
  27.         <div id="dv01">
  28.             <h1 :style="style1" @click="crandom">你的幸运数字：{{num}}</h1>
  29.             <div><input v-model="name" @change="showName"></div>
  30.             <h1 @dblclick="sj">双击6666</h1>
  31.             <input @keyup.down="xy"  @keyup.up="sy"  @keyup.left="zy"  @keyup.right="yy"  class="dv2" :style="dvposition"></input>
  32.             <button @click="xy(),yy()">动起来</button>
  33.         </div>
  34.         <script>
  35.         function randomHexColor() { //随机生成十六进制颜色
  36.          var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数
  37.          while (hex.length < 6) { //while循环判断hex位数，少于6位前面加0凑够6位
  38.           hex = '0' + hex;
  39.          }
  40.          return '#' + hex; //返回‘#'开头16进制颜色
  41.         }
  42.         //定义数据函数对象--Model
  43.         const params = {
  44.           data() {
  45.             return {
  46.               num: 0,
  47.               style1:"background-color:red",
  48.               name:"",
  49.               lnum:10,
  50.               tnum:10,
  51.               dvposition:"left: 10px;top:10px"
  52.             }
  53.           },
  54.           methods:{
  55.               crandom(){
  56.                     this.num=Math.floor(Math.random()*10);
  57.                     this.style1="background-color:"+randomHexColor();
  58.               },
  59.               showName(){
  60.                   alert(this.name);
  61.               },
  62.               sj(){
  63.                   this.name="双击成功："+new Date().toLocaleTimeString()
  64.               },
  65.               sy(){
  66.                  this.tnum-=10;
  67.                  this.dvposition="left: "+this.lnum+"px;top:"+this.tnum+"px";
  68.               },
  69.               xy(){
  70.                  this.tnum+=10;
  71.                  this.dvposition="left: "+this.lnum+"px;top:"+this.tnum+"px";
  72.               },
  73.               zy(){
  74.                  this.lnum-=10;
  75.                   this.dvposition="left: "+this.lnum+"px;top:"+this.tnum+"px";
  76.               },
  77.               yy(){
  78.                  this.lnum+=10;
  79.                  this.dvposition="left: "+this.lnum+"px;top:"+this.tnum+"px";
  80.               }
  81.           }
  82.         }
  83.         //将数据函数和标签对应绑定
  84.         Vue.createApp(params).mount('#dv01');
  85.         </script>
  86.     </body>
  87. </html>

2.4 双向绑定

用 v-model 指令在表单 、