Vue学习记录（一）

LvManBa

已于 2022-12-14 19:13:57 修改

阅读量201

点赞数

文章标签： vue.js 学习 javascript

于 2022-12-13 17:53:31 首次发布

本文链接：https://blog.csdn.net/LvManBa/article/details/121894055

版权

一、快速入门

1、什么是Vue?

Vue是一套构建用户界面的渐进式前端框架。
只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。

2、特点

易用：在有HTMLCSSJavaScript的基础上，快速上手。
灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。

3、快速入门

3.1、下载vue.js 文件

//开发版本:
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

//生产版本:
	<!-- 生产环境版本，优化了尺寸和速度 -->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

3.2、引入到页面(页面包括2个部分)
视图：负责页面渲染，主要由HTML+CSS构成。
脚本：负责业务数据模型（Model）以及数据的处理逻辑。

<body>
<!--视图-->
<div id="div">  {{msg}}  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
	//脚本
    new Vue({
        el:"#div",
        data:{
            msg: "lvmanba"
        },
        //
        methods:{},
        //计算属性
        //也可以理解为把涉及到计算的函数放在computed里面，日后涉及到计算的尽可能都放在这里，原因是能提升Vue的性能，即将第一次计算的结果进行缓存（只运行一次），在页面中可以重复使用。
        computed:{}
    })
</script>
</html>

computed和methods的区别：
在我们的实际开发中，有时很难去确定具体用computed还是methods，因为这两种方法最后的到的结果是一样的，但是他们的原理和用法却完全不同。

1、调用方式不同。computed直接以对象属性方式调用，不需要加括号，而methods必须要函数执行才可以得到结果。
2、绑定方式不同。methods与compute纯get方式都是单向绑定，不可以更改输入框中的值。compute的get与set方式是真正的双向绑定。
3、是否存在缓存。methods没有缓存，调用相同的值计算还是会重新计算。competed有缓存，在值不变的情况下不会再次计算，而是直接使用缓存中的值。
4、computed是响应式的，methods并非响应式

var vm = new Vue({
 			// 选项,各种属性
			el:" ",   //el: element 元素  代表vue实例的作用范围，用于获取范围内的元素。但不能作用于html 或者body标签。
			//数据  这里是一个对象，作用是自定义或者获取各种类型的数据，用于给当前vue实例绑定数据，在作用范围内使用{{ 变量名}}
			data: {
				msg:"lvmanba"     //键值对，可以定义多组数据，变量名和对应的值，在作用范围内的html中使用{{ msg }} 就能获取到值
			 }，        
			methods:{  //用来给vue实例绑定一系列的函数   方法
			}
})

注意事项：
1、一个页面中只能存在一个Vue实例，不能创建多个vue实例
2、vue中el属性：给实例提供作用范围
3、vue实例中data属性：给当前指定范围内提供数据来源，可以使用{{ 变量名}} 获取
4、使用{{ }} 进行data中数据获取时，可以在{{ }}取值语法中进行算数运算，逻辑运算以及调用相关类型的相关方法。如：
{{ msg+1}}、{{ msg.toUpperCase() }}、{{ msg.length }}、{{ msg == “hello vue”}}
5、vue实例中el属性可以书写任何css选择器，但是推荐使用id选择器，因为以个vue实例值能作用于一个具体作用范围。

<body>
  <div id="app">
    <h1>{{msg}}</h1>
    <h1>{{count}}</h1>
    <h1>{{user}}</h1>
    <h1>{{user.id}}---{{user.name}}---{{user.age}}</h1>
    <h1>{{school}}</h1>
    <h1>{{school[0]}}</h1>
    <h1>{{users}}</h1>
    <h1>{{users[0].name}}</h1>
  </div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
  var app = new Vue({  //变量app为实例对象的返回值
    el:"#app",  //指定了vu实例的作用范围
    data:{ //用来给vue实例定义一系列的数据
      msg:"lvmanba",  //字符串
      count:0,
      user:{id:1,name:"lvmanba",age:30}, //对象
      school:["东北师范大学","吉林农业大学","山东农业大学"], //数组
      users:[                          //数组中放对象
        {id:1,name:"lvmanba1",age:301},
        {id:2,name:"lvmanba2",age:302},
        {id:3,name:"lvmanba3",age:303}
      ],
    },
  });
</script>

使用函数

<div id="div">
    <div>{{msg}}</div>
    <div>  <button onclick="hi()">点我</button> </div>
    <div>  <button type="button" v-on:click="study">点我</button> </div>
    <div>  <button  @click="my">点我</button></div>
</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    let vm = new Vue({
        el:"#div",
        data:{
            msg: "Hello Vue",
            sex: 'girl'
        },
        methods:{
            study(){
                alert(this.msg)
            },
            my(){
                alert("i am student " + this.sex)
            }

        }
    });
    function  hi(){
        vm.study()
    }

</script>

二、常用的指令

指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。
使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。
常见的指令

1.1、{{}} 、v-text，v-html

v-text 和 v-html 类似于javascript中 innerHTML。
v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部(字符串原样输出，有HTML标签的，也直接输出) ，他也直接使用{{ msg }} 效果一直。 v-text可以避免在网络环境较差的情况下出现插值闪烁。
v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部（经过渲染后输出，如下面就输出黑体）

<div id="page">
  <div>
    <div>v-html、v-text： 如果是单个字符串，二者效果相同。 </div>
    <div>
       <h1>{{ msg }}</h1>      
      <h1 v-text="msg"></h1>
      <h1 v-html="msg"></h1>
    </div>
  </div>
  
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  let vm = new Vue({
    el: "#page",
    data:{
      msg:"<b>Hello Vue</b>"
    },
    methods:{    }
  })
</script>
</html>

1.2 绑定属性 v-bind:

使用方法： v-bind:属性名 或者简写 ：属性名 。如 v-bind:href="url" <==> :href="cls" 或者 v-bind:css="url" <==> :css="cls"

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定属性</title>
    <style>
        .my{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="div">
        <a v-bind:href="url">百度一下</a>
        <br>
        <a :href="url">百度一下</a>
        <br>
        <div :class="cls">我是div</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            url:"https://www.baidu.com",
            cls:"my"
        }
    });
</script>

1.3 条件渲染

v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
v-else：条件性的渲染。
v-else-if：条件性的渲染。
v-show：如果条件为真，则展示某元素，否则隐藏，区别在于切换的是display属性的值。

<body>
    <div id="div">
        <!-- 判断num的值，对3取余  余数为0显示div1  余数为1显示div2  余数为2显示div3 -->
        <div v-if="num % 3 == 0">div1</div>
        <div v-else-if="num % 3 == 1">div2</div>
        <div v-else="num % 3 == 2">div3</div>

        <div v-show="flag">div4</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            num:1,
            flag:false
        }
    });
</script>

1.4 列表渲染 v-for

v-for: 作用就是用来对对象进行遍历的(数组也是对象的一种)

<body>
    <div id="div">
        <ul>
            <li v-for="name in names">
                {{name}}
            </li>
            <li v-for="value in student">
                {{value}}
            </li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            //数组
            names:["张三","李四","王五"],
            //对象
            student:{
                name:"张三",
                age:23
            }
        }
    });
</script>

1.5 事件绑定 v-on: click

如点击事件：v-on:click="changeage" 等价于 @click="editage"
双击事件：v-on:dblclick=" "
1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如 v-on:click = “ ”
2.在v-on:事件名的赋值语句中是当前事件触发调用的函数名 v-on:click = "函数名"，函数名后面可以传递参数。
3.在vue中事件的函数统一定义在Vue实例的methods属性中
4.在vue定义的事件中this指的就是当前的Vue实例,日后可以在事件中通过使用this获取Vue实例中相关数据调用methods中相关方法

<div id="app">
  <h2>{{ age }}</h2>
  <!--  正常格式：v-on: click  -->
  <input type="button" value="通过v-on事件修改年龄每次+1" v-on:click="changeage">
    <!-- 通过简写 @click  -->
  <input type="button" value="通过@绑定时间修改年龄每次-1" @click="editage">
  -----------------------------------------------------------------------------
  <span>{{count}}</span>
  <input type="button" value="改变count为指定的值" @click="changecount(23,'xiaohei')">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",  //element: 用来指定vue作用范围
    data:{
      age:23,
      count:1
    },    //data   : 用来定义vue实例中相关数据
    methods:{
    //函数可以使用下列两种方法来定义，但是推荐使用第二种。
      changeage:function(){
        this.age++;
      },
      editage(){
        this.age--;
      },
      changecount(count,name){
                   this.count = count;
                   alert(name);
     }
    }  
  });
</script>

1.6 v-model 双向绑定

表单绑定
v-model：在表单元素（ input、textarea以及select）上创建双向数据绑定。
双向数据绑定
更新data数据，页面中的数据也会更新。
更新页面数据，data数据也会更新。
MVVM模型(ModelViewViewModel)：是MVC模式的改进版
在前端页面中，JS对象表示Model，页面表示View，两者做到了最大限度的分离。
将Model和View关联起来的就是ViewModel，它是桥梁。
ViewModel负责把Model的数据同步到View显示出来，还负责把View修改的数据同步回Model。

<body>
<div id="app">
    <input type="text" v-model="message">
    <span>{{message}}</span>
    <hr>
    <input type="button" value="改变Data中值" @click="changeValue">
</div>
</body>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message:""
        },
        methods: {
            changeValue(){
                this.message='百知教育!';
            }
        }
    });
</script>

1.7 事件修饰符

修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制
使用方法： @事件名称. 事件修饰符=“函数名” ===> @click.stop = “msg”

# 1.常用的事件修饰符
    .stop    执行完了停止,阻止向上继续激活分类的事件
	.prevent 阻止标签的默认行为
	.self    只监听自己，不管别人
	.once    只触发一次

1） stop事件修饰符

用来阻止事件冒泡: 在同一个范围内，点击子类事件，会触发父类的事件，如 a–>div–>body 他们都有点击事件，如果点击a 的事件，那么div 和 body 就会依次激活。 从里向外扩散

<div id="app">
    <div class="aa" @click="divClick">
        <!--用来阻止事件冒泡-->
        <input type="button" value="按钮" @click.stop="btnClick">
    </div>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {},
    methods: {
      btnClick(){
        alert('button被点击了');
      },
      divClick(){
        alert('div被点击了');
      }
    }
  });
</script>

2） prevent 事件修饰符

用来阻止标签的默认行为：下面默认的是先执行click事件，然后在开始跳转，如果使用了prevent之后，跳转就失效，
相当于 href=“javascript:;”

<!--用来阻止事件的默认行为-->
<a href="http://www.baizhibest.com/" @click.prevent="aClick">百知教育</a>

3） self 事件修饰符

用来针对于当前标签的事件触发 ===========> 只触发自己标签的上特定动作的事件只关心自己标签上触发的事件不监听事件冒泡

<!--只触发标签自身的事件-->
<div class="aa" @click.self="divClick">
  <!--用来阻止事件冒泡-->
  <input type="button" value="按钮"  @click.stop="btnClick">
  <input type="button" value="按钮1" @click="btnClick1">
</div>

4） once 事件修饰符

once 一次作用: 就是让指定事件只触发一次

    <!--
    .prevent : 用来阻止事件的默认行为
    .once    : 用来只执行一次特定的事件
    -->
    <a href="http://www.baizhibest.com/" @click.prevent.once="aClick">百知教育</a>

1.8 按键修饰符

作用: 用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符

# 按键修饰符
	.enter
	.tab
	.delete (捕获“删除”和“退格”键)
	.esc
	.space
	.up
	.down
	.left
	.right

enter 回车键

用来在触发回车按键之后触发的事件

 <input type="text" v-model="msg" @keyup.enter="keyups">

tab 键

用来捕获到tab键执行到当前标签是才会触发

<input type="text" @keyup.tab="keytabs">

在这里插入图片描述

LvManBa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习记录（一）

Vue基础Vue是一套构建用户界面的渐进式前端框架。只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。二、特点易用：在有HTMLCSSJavaScript的基础上，快速上手。灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。...
复制链接

扫一扫