Vue学习(一)—Vue核心概念

最新推荐文章于 2023-06-27 11:31:39 发布

coder-lxy

最新推荐文章于 2023-06-27 11:31:39 发布

阅读量256

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/qq_46178261/article/details/108104154

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨ES6的最新特性，如速写属性、方法及箭头函数，并介绍Vue.js实例创建、挂载、模板语法及指令的使用，为前端开发者提供全面的指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue学习—2020/8/18总结

ES6知识补充

速写属性

var name = "abc";
var age = 18;
var obj = {
 // 速写属性，当对象中的属性值来自于一个变量，可以简写为如下方式，等价于：name:name,age:age   
    name,
    age
}

速写方法

var obj = {
    name:"abc",
    // 速写方法，等价于sayHi:function() {...}
    sayHi() {
        console.log(this.name);
    },
}

箭头函数

    // 1. 无参数
    var fun = () => {
      console.log(123);
    }
    fun(); // 123
    // 2. 一个参数,可省略 "()"
    var fun1 = a => {
      console.log(a);
    }
    fun1(1); // 1
    // 3. 多个参数, 不能省略 "()"
    var fun2 = (a, b) => {
      console.log(a + b);
    }
    fun2(1,2) // 3
    // 4. 函数中只有一句语句,可省略"{}"
    var fun3 = (a, b) => console.log(a+b);
    fun3(3,4); // 7

ES6模板字符串

语法：用`（反引号）标识，用${}将变量括起来

传统字符串拼接痛点：

不能正常换行
不能友好的插入变量
不能友好的处理单、双引号互相嵌套的问题

模板字符串不仅解决了以上痛点还有一下强大之处：

${}里面可以插入任何js表达式，还可以是一个对象、数组，甚至是一个函数

   var obj = {
      a:1,
      b:2
    }
    console.log(`${obj}`); //[object Object]
    var arr = [1,2,3]
    console.log(`${arr}`); // 1,2,3

    var fn1 = function () {
      console.log(111);
    }
    var fn2 = function() {
      return '222'
    }
    console.log(`${fn1}`); // 111
    console.log(`${fn1()}`); // undefined
    console.log(`${fn2()}`); // 222
  </script>

Vue实例

通过new Vue({...})创建Vue实例对象

配置对象中的部分内容会被提取到vue实例中：

data
props
methods
computed

挂载

让vue实例控制网页中某个区域的过程，称之为挂载

挂载的方式：

通过 el:"css选择器"进行配置(常用)
通过vue实例.$mount("css选择器")进行配置

  <div id="app">
    {{message}}
  </div>

  <!-- 1. 通过 el:"css选择器"进行配置(常用) -->
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        message: "Hello Vue!"
      }
    })
  </script>

  <!-- 2. vue实例.$mount("css选择器") 进行配置 -->
  <script>
    var vm = new Vue({
      data: {
        message: "Hello"
      }
    })
    vm.$mount("#app")
  </script>

模板

被vue实例控制的页面片段

1. 模板的作用是什么？

为了提高渲染效率，vue会把模板编译成为虚拟DOM树 (VNode) ,然后再生成真实的DOM

2. 模板书写到哪？

在挂载的内部直接书写
在template配置中书写
在render配置中用函数创建

  <div id="app">
     <!-- 1. 在挂载的内部直接书写 -->
    <h2>{{message}}</h2>
      
  </div>
  <script>
    var vm = new Vue({
      el:"#app",
      data: {
        message: "Hello 1"
      },
      // 2. 在template配置中书写
      template:"<h2>Hello 2</h2>",//如果内容过多可采用ES6模板字符串
      // 3. 在render配置中用函数创建
      render(createElement) {
        return createElement("h2", "Hello 3")
      }
    })
  </script>

3. 模板里面写什么

静态内容
插值：{{JS表达式}}

指令

v-bind:属性名：绑定属性
v-on:事件名：绑定事件
v-if：判断元素是否需要渲染
v-show：判断元素是否应该显示(与v-if的区别是，v-show 元素会被渲染，只是不显示的时候是设置display:none)
v-for：用于循环生成元素
v-bind:key：用于帮助在重新渲染时元素的对比，通常和v-for配合使用，以提高渲染效率
v-model: 语法糖，用于实现双向绑定，实际上是自动绑定了value属性值，和注册了input事件

    <div id="app">
    <!-- 1. v-bind:属性名 -->
    <a :href="url">{{text}}</a>

    <!-- 2. v-on:事件名 -->
    <button v-on:click="alert()">按钮</button>

    <!-- 3.v-if -->
    <div v-if="arr.length===0">数组为空</div>

    <!-- 4. v-show -->
    <div v-show="arr.length===0">空数组</div>

    <!-- 5. v-for -->
    <ul>
      <li v-for="item in arr1">{{item}}</li>
    </ul>
    <!-- 6. v-bind:key -->
    <ul>
      <li v-for="(item,index) in arr1" :key="index">{{index}} : {{item}}</li>
    </ul>
    <!-- 7. v-model 双向绑定 -->
    链接地址：<input type="text" v-model="url">
    文本：<input type="text" v-model="text">
    <!-- v-model 相当于同时绑定了value属性 注册了inout事件   -->
    <input type="text" :value="text" @input="text=$event.target.value">
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        message: "Hello Vue!",
        url:"http://www.baidu.com",
        text:"百度一下",
        arr:[],
        arr1:[1,2,3,4]
      }
    })
  </script>