vue介绍和相关指令

最新推荐文章于 2023-12-26 21:28:30 发布

冲呀web

最新推荐文章于 2023-12-26 21:28:30 发布

阅读量159

点赞数

分类专栏： VUE入门文章标签： vue

本文链接：https://blog.csdn.net/weixin_44698566/article/details/109321747

版权

VUE入门专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.1. Vue 的基本认识

1.1.1. 官网

英文官网: https://vuejs.org/
中文官网: https://cn.vuejs.org/

1.1.2. 介绍描述

渐进式 JavaScript 框架
作者: 尤雨溪(一位华裔前 Google 工程师)
作用: 动态构建用户界面
Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）

4.Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！

5.Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）

6.前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

7.企业中，使用框架，能够提高开发的效率；
提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】）

8.在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；

框架和库的区别
框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。

node 中的 express；
库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

从Jquery 切换到 Zepto
从 EJS 切换到 art-template

1.1.3. Vue 的特点

遵循 MVVM 模式
编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目

MVVM:
model:模型，数据对象（data）
view：视图，模板页面
viewModel：视图模型（Vue的实例）
1.1.4. 与其它前端 JS 框架的关联
借鉴 angular 的模板和数据绑定技术
借鉴 react 的组件化和虚拟 DOM 技术

MVC 是后端的分层开发概念；
MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View , VM ViewModel
在这里插入图片描述

1.1.5. Vue 扩展插件

vue-cli: vue 脚手架
vue-resource(axios): ajax 请求
vue-router: 路由
vuex: 状态管理
vue-lazyload: 图片懒加载
vue-scroller: 页面滑动相关
mint-ui: 基于 vue 的 UI 组件库(移动端)
element-ui: 基于 vue 的 UI 组件库(PC 端)

2.1 vue基础

vue生命周期：Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
2.11创建第一个vue程序

引入Vue.js
创建Vue对象
el : 指定根element(选择器)
data : 初始化数据(页面可以访问)
双向数据绑定 : v-model
显示数据 : {{xxx}}
理解vue的mvvm实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_HelloWorld</title>
</head>
<body>

<!--
  1. 引入Vue.js
  2. 创建Vue对象
    el : 指定根element(选择器)
    data : 初始化数据(页面可以访问)
  3. 双向数据绑定 : v-model
  4. 显示数据 : {{xxx}}
  5. 理解vue的mvvm实现
-->

<!--模板-->
<div id="test">
  <input type="text" v-model="msg"><br><!--指令-->
  <!-- <input type="text" v-model="msg">指令 -->
  <p>hello {{msg}}</p><!--差值表达式-->
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  // 创建Vue实例
  const vm = new Vue({ // 配置对象 options
    // 配置选项(option)
    el: '#test',  // element: 指定用vue来管理页面中的哪个标签区域
    data: {
      msg: 'first——vue'
    }
  })
</script>
</body>
</html>

注意：
1.vue实例的作用范围：
vue会管理el选项命中的元素及其内部的后代元素
2.可以使用其他选择器，但建议使用id选择器，单标签元素，html,body,不可以使用；

3，指令

3.1 v-text
用于渲染普通文本，无论何时，绑定的数据对象上 msg属性发生了改变，插值处的内容都会更新。
举例：
dom结构：

		<!-- 内部文本会被替换 -->
        <!-- 字符串拼接在内部进行 -->
        <!--1. v-text 简写：{{}}-->
        <h2 v-text="msg + '!'" >12</h2>
        <p>{{msg}}{{info +"!"}}</p>

js代码：

<script src="../js/vue.js"></script>
    <script>
    //创建一个vue对象
        const vm = new Vue({
            el: "#app",
            data: {
                msg: "我是vue",
                info: "123"
            }
        })
    </script>

结果：
在这里插入图片描述
结果：

v-text和差值表达式{{}}的区别：
1.插值表达式闪烁的问题（使用 v-cloak 能够解决），v-text 是没有闪烁问题的
2.v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空

3.2v-html
与v-text一样，不同的是可以解析HTML代码
举例：
dom结构：

<p v-html="content"></p>

js代码：

<script src="../js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                content: " <a href='#'>www.baidu.com</a>"
            }
        })
    </script>

结果：
会将<a href='#'>www.baidu.com</a>渲染成为HTML代码
在这里插入图片描述
结果：

3.3 事件绑定v-on
v-on: 事件绑定机制
dom结构：

		<button v-on:click="test()">点我</button>
       //简写形式
        <button @click="test()">点我</button>
        <!-- 通过绑定事件更改dom元素的内容 -->
        <button @click="chang">{{likes}}</button>//如果事件绑定的方法没有参数可以选择加括号也可以不加括号

js代码：

<script src="../js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                likes: "我爱打篮球"
            },
            // 添加方法
            methods: {
                test(){
                    alert("v-on绑定的事件");
                },
                change(){
                    // alert(this.likes);
                    this.likes = "蔡徐坤爱打篮球";
                }
            }
        })

结果：
在这里插入图片描述
总结：

v-on，传递自定义参数，事件修饰符

 <!-- v-on补充，传递自定义参数 -->
    <div id="app">
        <!-- <button v-on:click="test()">点我</button> -->
        <button @click="test(666)">点我</button>
    </div>
</body>
<script src="../js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                msg: "我是vue",
                info: "123",
                content: " <a href='#'>www.baidu.com</a>",
                likes: "我爱打篮球"
            },
            // 添加方法
            methods: {
                test(aa){
                    alert(aa);
                }
            }
        })

结果：
在这里插入图片描述
3.31 v-on中的事件修饰符：

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次

<!-- 使用  .stop  阻止冒泡 -->
    <!-- <div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click.stop="btnHandler">
    </div> -->

    <!-- 使用 .prevent 阻止默认行为 -->
    <!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a> -->

    <!-- 使用  .capture 实现捕获触发事件的机制 -->
    <!-- <div class="inner" @click.capture="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
    </div> -->

    <!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
    <!-- <div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
    </div> -->

    <!-- 使用 .once 只触发一次事件处理函数 -->
    <!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a> -->


    <!-- 演示： .stop 和 .self 的区别 -->
    <!-- <div class="outer" @click="div2Handler">
      <div class="inner" @click="div1Handler">
        <input type="button" value="戳他" @click.stop="btnHandler">
      </div>
    </div> -->

    <!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->
    <!-- <div class="outer" @click="div2Handler">
      <div class="inner" @click.self="div1Handler">
        <input type="button" value="戳他" @click="btnHandler">
      </div>
    </div> -->

3.4 显示切换v-show 和v-if
v-show根据表达式的真假，切换元素的显示和隐藏,通过display来实现
v-if根据表达式的真假，切换元素的显示和隐藏（操作domshutdow树，删除或增加节点来实现）

举例：

 <div id="box">
        <!-- 频繁切换用v-show -->
        <!-- v-show根据表达式的真假，切换元素的显示和隐藏,通过display来实现 -->
        <h2 v-show="isShow">我是内容1</h2>
        <!-- v-if根据表达式的真假，切换元素的显示和隐藏（操作domshutdow树，删除或增加节点来实现） -->
        <h2 v-if="isShow">我是内容2</h2>
        <h2 v-if="num>40">111</h2>
        <button @click="change">点我</button>
        
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el: "#box",
        data: {
            isShow: true,
            num: 30
        },
        methods: {
            change(){
                this.isShow = !this.isShow;
            }
        }
    })
</script>

在这里插入图片描述

3.5 v-bind设置元素属性
v-bind: 是 Vue中，提供的用于绑定属性的指令，v-bind 中，可以写合法的JS表达式

<div id="app">
        <!-- v-bind设置元素属性 -->
        <!-- 方式一 -->
        <img v-bind:src="src" alt="">
        <!-- 简写 -->
        <img :src="src" alt="">
        <!-- 方式二，通过三元表达式添加类名 -->
        <img v-bind:src="src" alt="" :class="is?'active':''">
        <!-- 方式三，通过对象的方式添加类名 -->
        <img v-bind:src="src" alt="" :class="{active:is}">
        
    </div>
</body>
    <script src="../js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                src: "../img/1.PNG" ,
                is: true 
            }
            
            });

!](https://img-blog.csdnimg.cn/20201028201621348.png#pic_center 在这里插入图片描述

3.6 v-for 根据数据生成列表结构
v-for="(item,index) in arr"
item:遍历的当前对象
index:当前索引
arr:被遍历的数组

<div id="app">
        <!-- v-for 根据数据生成列表结构 -->
        <ul>
            <li v-for="(item,index) in arr">{{index + 1}}城市:{{item}}</li>
        </ul>
        <h2 v-for="(item,index) in fruit">{{item.name}}</h2>
    </div>
    
</body>
    <script src="../js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                //数组
                arr: ["北京","上海","广州","成都"],
                //对象
                fruit: [
                    {name: "苹果"},
                    {name: "香蕉"},
                    {name: "葡萄"}
                ]
            }
        });
    </script>

在这里插入图片描述

关于v-for里面的key属性：当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

举例说明：
不加key时，添加前：
在这里插入图片描述
不加key时，添加后：

选中元素是当前索引，不会同步更改到以前选中的那个元素上。

加key属性时，添加前：
在这里插入图片描述
加key属性时，添加后：

<body>
  <div id="app">

    <div>
      <label>Id:
        <input type="text" v-model="id">
      </label>

      <label>Name:
        <input type="text" v-model="name">
      </label>

      <input type="button" value="添加" @click="add">
    </div>

    <!-- 注意： v-for 循环的时候，key 属性只能使用 number获取string -->
    <!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 -->
    <!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 -->
    <p v-for="item in list" :key="item.id">
      <input type="checkbox">{{item.id}} --- {{item.name}}
    </p>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        list: [
          { id: 1, name: '李斯' },
          { id: 2, name: '嬴政' },
          { id: 3, name: '赵高' },
          { id: 4, name: '韩非' },
          { id: 5, name: '荀子' }
        ]
      },
      methods: {
        add() { // 添加方法
          this.list.unshift({ id: this.id, name: this.name })
        }
      }
    });
  </script>

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。
举例：
1.v-for循环普通数组：

<body>
  <div id="app">

    <p v-for="(item, i) in list">索引值：{{i}} --- 每一项：{{item}}</p>

  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [1, 2, 3, 4, 5, 6]
      },
      methods: {}
    });
  </script>
</body>

结果：
在这里插入图片描述

2.v-for循环对象数组：

<body>
  <div id="app">
    <p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, name: 'zs1' },
          { id: 2, name: 'zs2' },
          { id: 3, name: 'zs3' },
          { id: 4, name: 'zs4' }
        ]
      },
      methods: {}
    });
  </script>
</body>

结果：
在这里插入图片描述
3.v-for循环对象

<body>
  <div id="app">
    <!-- 注意：在遍历对象身上的键值对的时候， 除了 有  val  key  ,在第三个位置还有 一个 索引  -->
    <p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        user: {
          id: 1,
          name: '托尼·屎大颗',
          gender: '男'
        }
      },
      methods: {}
    });
  </script>
</body>

结果：
在这里插入图片描述
4.v-for迭代数字

<body>
  <div id="app">
    <!-- in 后面我们放过  普通数组，对象数组，对象， 还可以放数字 -->
    <!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 -->
    <p v-for="count in 10">这是第 {{ count }} 次循环</p>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>
</body>

结果：
在这里插入图片描述
3.7 表单元素绑定 v-model
使用 v-model 指令，可以实现表单元素和 Model 中数据的双向数据绑定
注意： v-model 只能运用在表单元素中（ input(radio, text, address, email…) select checkbox textarea），v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V，无法实现数据的双向绑定
在这里插入图片描述

<!--模板-->
<div id="test">
  <input type="text" v-model="msg"><br><!--指令-->
  <!-- <input type="text" v-model="msg">指令 -->
  <p>hello {{msg}}</p><!--大括号表达式-->
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  // 创建Vue实例
  const vm = new Vue({ // 配置对象 options
    // 配置选项(option)
    el: '#test',  // element: 指定用vue来管理页面中的哪个标签区域
    data: {
      msg: 'first——vue',
  })
</script>

结果：
在这里插入图片描述

冲呀web

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue介绍和相关指令

1.1. Vue 的基本认识1.1.1. 官网英文官网: https://vuejs.org/中文官网: https://cn.vuejs.org/1.1.2. 介绍描述渐进式 JavaScript 框架作者: 尤雨溪(一位华裔前 Google 工程师)作用: 动态构建用户界面1.1.3. Vue 的特点遵循 MVVM 模式编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目MVVM:model:
复制链接

扫一扫