学习vue2.0-初体验及常用指令

最新推荐文章于 2023-08-30 10:38:31 发布

大绿绿青菜

最新推荐文章于 2023-08-30 10:38:31 发布

阅读量331

点赞数 1

分类专栏： vue 文章标签：学习 javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_58510118/article/details/124952660

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、vue是什么？

Vue.js是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。

能够更好地组织与简化Web开发。

二、vue的安装

1.通过script引入

本地下载
https://cn.vuejs.org/js/vue.js 下载地址
cdn的方式
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

2.通过npm安装

下载 npm i vue
导入 const Vue = require('vue') / import Vue from 'vue'

在基础学习阶段，建议大家使用本地下载引入的方式。

三、体验vue

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01-vue体验</title>
</head>
<body>
  <!-- 1. 两个标签  h1  input , 有一个字符串数据， 把数据渲染到这两个标签 -->
  <!-- 2. input输入内容的时候，收集输入的内容，h1标签的内容改成你输入的内容 -->
  <div id="app">
    <h1>{{msg}}</h1>
    <input type="text" v-model="msg">
  </div>
  <!-- 引入 -->
  <script src="./vue.js"></script>
  <script>
    // 当你导入vue.js后，全局环境中拥有一个构造函数，Vue
    const vm = new Vue({
      // vue的配置对象
      el: '#app',
      data: {
        msg: 'hi vue'
      }
    })
  </script>
</body>
</html>

1.选项el

作用：为实例化好的vm对象（vue实例）指定它管理的容器（标签）视图。让vue去管理一个容器

注意：el不能使用body和html标签作为视图容器；

2.选项data

作用：在视图中需要使用的数据在data当中声明，任何格式数据都可以。

特点：data中显性声明的数据都是响应式数据（当数据发生变化的时候，使用数据的视图也自动更新）

  <div id="app">
    <h1>{{msg}}</h1>
    <i>{{user.name}}</i>
  </div>
  <script src="./vue.js"></script>
  <script>
    // 实例化vue
    const vm = new Vue({
      el: '#app',
      // vue选项，data作用是声明响应式数据
      data: {
        msg: 'hi vue',
        user: {
          name: '张三'
        }
      }
    })
  </script>

3.选项methods

作用：在vue程序中，vue实例中，需要使用的函数统一在methods进行定义。

    <div id="app">
      {{say()}}
      <hr>
      {{say2()}}
      <hr>
      {{say3()}}
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          msg: 'hi vue'
        },
        methods: {
          say: function () {
            // 如果函数有返回值，在模板中调用函数，会输出返回值。
            return 'hi vue'
          },
          say2: function () {
            // 在methods中声明的函数，其中的this就是vm实例
            return this.msg
          },
          // 2. 箭头函数写法
          say3: () => {
          
            console.log(this)
          }
        }
      })
    </script>

注意：如果是箭头函数本身是没有this的，使用外层作用域的this
此时的外层作用域的this是window而不是vm，不能访问vue实例的数据和函数
建议：在methods中的函数尽量别写箭头函数，我们会经常访问数据和函数

4.插值表达式{{ }}

作用：在模板中输入内容，把数据对应的值插入到模板当中（视图中）

语法：在被vue管理的视图中 {{ 任何js表达式 }}

四、常用指令

1.v-text和v-html

v-text在使用该指令的标签中更新替换所有标签的内容，格式是文本、innerText 作用相似

v-html在使用该指令的标签中更新替换所有标签的内容，格式是HTML、innerHTML 作用相似

    <div id="app">
      <div v-text="textStr"></div>
      <div v-html="htmlStr"></div>
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          textStr: '我是textStr',
          htmlStr: '<b>我是textStr</b>'
        },
      })
    </script>

2.v-show和v-if 控制标签的显示和隐藏

v-show 是通过控制样式 display:none 来实现

v-if 是通过创建和移除标签来实现，消耗性能多一些。

在下面v-on中使用到

3.v-on绑定事件

语法： <div v-on:事件名称="事件处理函数|js表达式"></div> 另外v-on可以简写成 @

    <div id="app">
      <!-- 点击按钮的时候，修改isShow数据的值 -->
      <button @click="toggleShow">切换显示隐藏</button>
      <div v-show="isShow">我是一个div</div>
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          isShow: true
        },
        methods: {
          toggleShow () {
            this.isShow = !this.isShow
          }
        }
      })
    </script>

4.v-for通过数据动态遍历标签

语法：

遍历4次 <div v-for="i in 4">i是从1开始序号</div>
数组类型 list = [{},{},...]
- <div v-for="item in list">item就是每次遍历的选项数据</div>
- <div v-for="(item,i) in list">item就是每次遍历的选项数据，i就是索引</div>
对象类型 obj = {a:1,b:2}
- <div v-for="(v,k,i) in obj">v属性值，k属性名，i索引</div>

规范：

在v-for指令使用的时候，需要带上一个属性 key 且指定唯一的标识
目的：给遍历的每一个元素加上唯一标识，提高操作的性能。
语法：v-for="" :key="唯一标识" 建议使用ID，不得已情况下才会使用索引。

    <div id="app">
      <div v-for="(v,k,i) in obj" :key="k">值：{{v}} 键：{{k}} 索引：{{i}}</div>
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          obj: {
            name: 'tom',
            age: 10
          }
        },
      })
    </script>

5.v-bind动态的去绑定属性的值

<div v-bind:标签属性名称="数据名称|js表达式"></div> 简写 :

v-bind绑定class

绑定对象：

语法：<div :class="{类名:是否添加该类名,...}"></div>
例如：<div :class="{btn:true,red:false}"></div>

绑定数组：

语法：<div :class="['类名1','类名2']"></div>
例子：<div :class="['bg','red']"></div>

v-bind绑定style

使用对象绑定：

语法：<div :style="{color:'red',fontSize:'20px'}" ></div>

使用数组绑定：

语法：<div :style="[{color:'red'},{fontSize:'20px'}]" ></div>6.

6.v-model表单元素进行双向数据绑定

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <!-- 输入框 -->
      <input type="text" v-model="str">
      <hr>
      <!-- 下拉框 -->
      <select v-model="subject">
        <!-- :value目的是让数值解析 number -->
        <option :value="1">前端</option>
        <option :value="2">java</option>
        <option :value="3">UI</option>
      </select>
      <hr>
      <!-- 复选框 -->
      <!-- 1. 单个复选框  表示布尔类型的值  true 选中 false 不选中 -->
      <input type="checkbox" v-model="isChecked">
      <hr>
      <!-- 2. 多个复选框 -->
      <input type="checkbox" value="book" v-model="hobby"> 书籍
      <input type="checkbox" value="ball" v-model="hobby"> 球类
      <input type="checkbox" value="game" v-model="hobby"> 游戏
      <hr>
      <!-- 单选框 -->
      <input type="radio" value="男" v-model="gender"> 男
      <input type="radio" value="女" v-model="gender"> 女
      <!-- 文本域 -->
      <hr>
      <textarea v-model="text"></textarea>
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          str: '输入框',
          subject: '',
          isChecked: false,
          hobby: [],
          gender: '男',
          text: '文本域'
        },
        methods: {}
      })
    </script>
  </body>
</html>