Vue2基础

属性

el：挂载点

  • Vue会管理el选项命中的元素及其内部的后代元素

  • 可以使用其他的选择器，但是建议使用ID选择器

  • 可以使用其他的双标签，但不是能挂载到html和body上

 <body>
     {{message}}
     <div id="app" class="app">
       {{message}}
       <span>{{message}}</span>
     </div>
     <script>
       var app = new Vue({
         // el:'.app',
         //建议选择id选择器
         //只支持双标签，但不能挂在到 <body>和<html>
         el: "#app",
         data: {
           message: "hallo Vue",
         },
       });
     </script>
   </body>

data:数据类型

  • Vue中用到的数据定义在data中

  • data中可以写复杂类型的数据

  • 渲染复杂类型数据时,遵守js的语法即可

  • data数据可以是数组 对象的.语法

 <div id="app">
       {{message}}
       <h2>{{school.name}} {{school.mobile}}</h2>
       <ul>
         <li>{{campus[0]}}</li>
         <li>{{campus[1]}}</li>
       </ul>
 </div>
 <script>
       var app = new Vue({
         el: "#app",
         data: {
           message: "你好小黑",
           school: {
             name: "小黑",
             mobile: "400",
           },
           campus: ["北京", "上海"],
         },
       });
 </script>

计算属性

computed

  • computed属性是一种计算属性,它的值依赖于其他数据属性,只有当依赖的数据变化时,才会重新计算

  • 适合根据已有的数据计算出一个新的值

 <div id="example">
   <p>Original message: "{{ message }}"</p>
   <p>Computed reversed message: "{{ reversedMessage }}"</p>
 </div>
 var vm = new Vue({
   el: '#example',
   data: {
     message: 'Hello'
   },
   computed: {
     // 计算属性的 getter
     reversedMessage: function () {
       // `this` 指向 vm 实例
       return this.message.split('').reverse().join('')
     }
   }
 })

结果:

Original message='Hello'

Computed reversed message: "olleH"

methods

  • methods 是用于定义可调用的函数,这些函数没有缓存,每次调用都会重新执行

Vue指令

v-text

设置标签的文本值(textContent)

  • v-text指令的作用是:设置标签的内容(textContent)

  • 默认写法会替换全部的内容,使用差值表达式{{}}可以替换指定的内容

  • 内部支持写入表达式

 <body>
     <div id="app">
       <h2 v-text="info+'!'"></h2>
       <h2>深圳{{message+'!'}}</h2>
       <!--差值表达式-->
     </div>
     <script>
       var app = new Vue({
         el: "#app",
         data: {
           info: "你好",
           message: "小黑",
         },
       });
     </script>
   </body>

v-html

设置标签的innerHTML

  • v-html指令的作用是: 设置元素的innerHTML

  • 内容中有html结构会被解析为标签

 body>
     <div id="app">
       <p v-html="info"></p>
       <p v-text="info"></p>
       <p v-html="message"></p>
       <p v-text="message"></p>
     </div>
     <script>
       var app = new Vue({
         el: "#app",
         data: {
           info: "你好",
           message: "<a href='#'>链接</a>",
         },
       });
     </script>
   </body>

v-once

执行一次性的插值

  • 当数据改变时,插值的内容不会更新

 <span v-once>这个值将不会改变:{{msg}} </span>

v-on

为元素绑定元素

  • v-on指令的作用是:为元素绑定事件

  • 事件名不需要写on

  • 指令可以简写为@

  • 绑定的方法定义在methods属性中

  • 方法内部通过this关键字可以访问定义在data中数据

  • 事件绑定的方法写成函数调用的形式,可以传入自定义参数

  • 定义方法时需要定义形参来接受传入的实参

 <div id="app">
       <input type="button" value="v-on指令" v-on:click="doIT" />
       <input type="button" value="v-on指令" @click="doIT" />
       <input type="button" value="v-on指令" @dblclick="doIT" />
       <h1 @click="changefood">{{food}}</h1>
     </div>
     <script>
       var app = new Vue({
         el: "#app",
         data: {
           food: "木耳",
         },
         methods: {
           doIT: function () {
             alert("IT");
           },
           changefood: function () {
             console.log(this.food);
             this.food += "不好吃";
           },
         },
       });
     </script>
事件修饰符

  • .stop 停止事件的传播,防止冒泡

  • .prevent 用于阻止元素的默认行为

  • .capture 捕获事件

  • .self用于指代自己本身

  • .once该事件监听器只能被调用一次 调用后自动移除

  • .passive表明改时间处理程序不会调用prevent Default()

v-show

  • v-show指令的作用是:根据真假切换元素的显示状态

  • 原理是修改元素的display,实现显示隐藏

  • 指令后面的内容,最终都会解析为布尔值

  • 值为true元素显示,值为false元素隐藏

  <div id="app">
       <img src="../网易云/image/music-1.jpg" alt="" v-show="true" />
       <img src="../网易云/image/music-1.jpg" alt="" v-show="isShow" />
       <img src="../网易云/image/music-1.jpg" alt="" v-show="age>18" />
       <button @click="changeIsShow">点击</button>
     </div>
     <script>
       var app = new Vue({
         el: "#app",
         data: {
           isShow: false,
           age: 16,
         },
         methods: {
           changeIsShow: function () { //绑定方法
             this.isShow = !this.isShow;
             this.age = 20;
           },
         },
       });
     </script>

v-if

根据表达式的真假,切换元素的显示和隐藏(操纵dom元素)

  • v-if指令的作用是:根据表达式的真假切换元素的显示状态

  • 本质是通过操纵dom元素切换显示状态

  • 表达式的值为true,元素存在于dom树中,为false 从dom树移除

  • 频繁的切换v-show,反之使用v-if,前者的切换消耗小

用key管理可复用函数

  • Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染

  • 需要相互独立并且重新渲染,则用key来管理

 <template v-if="loginType === 'username'">
   <label>Username</label>
   <input placeholder="Enter your username" key="username-input">
 </template>
 <template v-else>
   <label>Email</label>
   <input placeholder="Enter your email address" key="email-input">
 </template>

v-else

如果使用v-else指令 必需紧跟在v-else和v-else-if后面

 <div v-if="Math.random() > 0.5"> <!--判断随机数 真显示第一个 假显示第二个-->
   Now you see me
 </div>
 <div v-else>
   Now you don't
 </div>

v-else-if

 <div v-if="type === 'A'">
   A
 </div>
 <div v-else-if="type === 'B'">
   B
 </div>
 <div v-else-if="type === 'C'">
   C
 </div>
 <div v-else>
   Not A/B/C
 </div>

v-bind

设置元素的属性(比如src,title,class)

  • v-bind指令的作用是:为元素绑定的属性

  • 完整写法是v-bind:属性名

  • 简写的话可以省略v-bind,只保留: 属性名

 <div id="app">
       <img v-bind:src="imgSrc" alt="" />
       <img v-bind:title="imgTitle+'!!!!'" />
       <img v-bind:class="isActive?'active':''" /><!--三元表达式-->
       <img v-bind:class="{active:isActive}" />
       <!--简写-->
       <img :src="imgSrc" :title="imgTitle+'!!!'" />
     </div>
     <script>
       var app = new Vue({
         el: "#app",
         data: {
           imgSrc: "../网易云/image/music-1.jpg",
           imgTitle: "pic",
           isActive: false,
         },
         methods: function () {
           this.isActive = !this.isActive;
         },
       });
     </script>

v-for

根据数据表生成列表结构

  • v-for指令的作用是:根据数据生成列表结构

  • 数组经常和v-for结合使用

  • 语法是(item,index) in数据

  • item和index可以结合其他指令一起使用

  • 数组长度的更新会同步到页面上去,是响应式的

 <div id="app">
       <button @click="add">添加</button>
       <button @click="remove">删除</button>
       <ul>
         <li v-for="(item,index) in arr">{{index}}{{item+1}}</li>
         <!--index是索引-->
       </ul>
     </div>
     <script>
       var app = new Vue({
         el: "#app",
         data: {
           arr: [1, 2, 3, 4, 5],
         },
         methods: {
           add: function () {
             this.arr.push(6);
           },
           remove: function () {
             this.arr.shift();
           },
         },
       });
     </script>
数组更新

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

  • push() 在数组后面添加

  • pop() 把数组的末尾删除,并且返回这个元素的值

  • shift() 把数组最前的一个元素删掉,并且返回这个元素的值

  • unshift()在数组的前方添加

  • splice()(index , delte Count ,item) index后面插入/删除元素的位置

  • sort() 对数组进行排序

  • reverse() 反转数组

  • concat 拼接字符串

  • indexOf 查找数组

  • join 数组转换成字符串

v-model

获取和设置表单元素的值(双向数据绑定)

  • v-model指令的作用是便捷的设置和获取表单元素的值

  • 绑定的数据会和表单元素值相关联

  • 绑定的数据<-->表单元素的值

 <body>
     <div id="app">
       <input type="text" v-model="message" @keyup.enter="getM" />
       <h2>{{message}}</h2>
       <script>
         var app = new Vue({
           el: "#app",
           data: {
             message: "你好",
           },
           methods: {
             getM: function () {
               alert(this.message);
             },
           },
         });
       </script>
     </div>
   </body>

  • 在复选框的应用:

 <div id="app">
       <input type="checkbox" id="checkbox" v-model="checked" />
       <label for="checkbox">{{checked}}</label>
     </div>
     <script>
       var app = new Vue({
         el: "#app",
         data: {
           checked: false,
         },
       });
     </script>
修饰符
.lazy

在默认情况下,v-model 在每次 input事件触发后将输入框的值域数据进行同步,可以添加.lazy修饰符,从而转为change事件后进行同步

 <!-- 在“change”时而非“input”时更新 -->
 <input v-model.lazy="msg">
.number

如果想自动将用户的输入转化为数值类型 可以给v-model 添加 number 修饰符

 <input v-model.number="age" type="number">

通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

.trim

如果要自动过滤掉用户输入的首尾空白字符, 可以给 v-model 添加 trim 修饰符:

 <input v-model.trim="msg">

动态参数

 <a v-bind:[attributeName]="url"> ... </a>

这里的attributeName会被作为一个Js表达式进行动态求值如果 例如，如果你的 Vue 实例有一个 data property attributeName,该值为'herf'那么绑定就相当于v-hind:herf

  <!--
 在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
 除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
 -->
 <a v-bind:[someAttr]="value"> ... </a>

注册组件

基本事例;

  Vue.component("button-counter", {
         data: function () {
           return {
             count: 0,
           };
         },
         template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>',
       });

这样写后我们就可以通过调用<button-counter>来获取我们所写的组件

组件的复用

 <div id="components-demo">
   <button-counter></button-counter>
   <button-counter></button-counter>
   <button-counter></button-counter>
 </div>

当点击按钮时,每个组件都拥有它的count.因为你每用一次组件,就会有一个它的新实例被创建

data 必须是一个函数

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

 data: function () {
   return {
     count: 0
   }
 }

通过prop向子组件传递数据

Prop是可以在组件上注册一些自定义attribute. 当一个值传递给一个prop attribute的时候, 它就变成了那个组件实例的property.

实例:

 Vue.component('blog-post', {
   props: ['title'],
   template: '<h3>{{ title }}</h3>'
 })

Class 与 Style绑定

操作元素的class列表和内联表样式是数据绑定的一个常见需求,我们可以用v-bind处理它们

绑定HTML Class

对象语法

  • 我们可以传给 v-bind:class 一个对象, 以动态地切换class:

 <div v-bind:class = '{active : isActive}'></div>

  • 上述的语法表示active这个 class 存在与否将取决于数据 property isActive的 值

  • 也可以在对象中传入更多字段来动态切换多个class,此外, v-bind:class指令也可以与普通的class共存

 <div
   class="static"
   v-bind:class="{ active: isActive, 'text-danger': hasError }"
 ></div>

  • 例子:

     <style>
       .height {
         width: 200px;
         height: 200px;
         background-color: pink;
       }
       .weight {
         color: red;
       }
     </style>
     <script src="js/vue.js"></script>
   </head>
   <body>
     <div id="app">
       <div v-bind:class="classObject">123</div>
       <button @click="btn">变换颜色</button>
     </div>
     <script>
       var app = new Vue({
         el: "#app",
         data: {
           classObject: {
             height: true,
             weight: false,
           },
         },
         methods: {
           btn: function () {
             this.classObject.weight = !this.classObject.weight;
             console.log(this.weight);
           },
         },
       });
     </script>
       <!--只显示height的css属性,但点击按钮后会显示weight属性-->
数组语法

我们可以把一个数组传给v-bind:class以引用一个class列表:

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为:

<div class="active text-danger"></div>

绑定内联样式

对象语法

v-bind: style的对象语法十分直观

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}

简写方法

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
数组语法

v-bind:style的数组语法可以将多个样式对象应用到同一个元素上:

<div v-bind:style="styleObject"></div>

axios +vue

功能强大的网络请求库

axios.get(地址?查询字符串).then(function(res){},function(err){})
axios.post(地址,参数对象).then(function(res){},function(err){})

结合Vue一起

<body>
    <div id="app">
      <input type="button" value="获取文字" @click="GET" />
      <p>{{text}}</p>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          text: "我是文字",
        },
        methods: {
          GET: function () {
            console.log(this.text);
            axios
              .get("http://127.0.0.1:4523/m1/5328031-4998617-default/api/joke")
              .then((res) => {
                console.log(this.text);
                this.text = res.data.text;
              })
              .catch((err) => {
                this.text = "获取失败";
              });
          },
        },
      });
    </script>
  </body>


#培训阶段
Vue2基础
http://localhost:8090//archives/vue2ji-chu
作者
傅凯风
发布于
2024年11月01日
许可协议