vue快速入门级学习笔记(来自黑马程序员教程)

vue快速入门笔记

该笔记总结于黑马程序员视频《前端基础必会教程-4个小时带你快速入门vue》前17P
完整视频链接:https://www.bilibili.com/video/BV12J411m7MG/?p=1

使用步骤

1、导入开发版本的vue.js,详细方法见官网介绍,最简单的是用script引入
2、创建vue实例对象,设置el属性挂载到对应的div上
3、使用简洁的模板语法渲染页面

el:挂载点

通过CSS选择器设置vue实例管理的元素,设置完毕之后,el命中的元素的内部,使用两个花括号修饰的部分就会被data中同名的地方给替换

不要把vue挂载到HTML和body上面,建议把el挂载到div上面

data数据对象

1、vue中用到的数据定义在data中
2、data可以写复杂类型的数据
3、渲染复杂类型数据时,遵守js语法规则即可,比如数组根据下标取值,对象用点方法取值

vue指令

内容绑定,事件绑定:

v-text

设置标签的文本值
在这里插入图片描述

但是这么写有个缺点,无论h2里面有什么内容都会被替换掉不想被替换掉还是要使用插值表达式

v-text的值还支持写表达式做复杂设计,例如拼接,无论内容是什么,只会解析成文本(和v-html的区别)

v-text写在行内就是v-text=“message” , 如果写在标签里面只需要用插值表达式的格式:{{message}}就可以渲染

v-html

v-html可以解析成标签,相当于jQuery的 $().html(),类似于JavaScript里面的innerHTML

v-on

为元素绑定事件,例如鼠标点击,鼠标移入等
语法规则:v-on:事件名称=“方法”
方法写在vue实例里面的methods里面(与el data平级)v-on可以简写成@
在这里插入图片描述
vue是虚拟DOM,基于虚拟dom,一种可以预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化的技术,由于这个DOM操作属于预处理操作,并没有真实的操作DOM,所以叫做虚拟DOM。

也就是说:vue是不用操作DOM元素了,更改页面显示通过改变数据来实现,数据改变,页面跟着改变,so代码在下一次刷新进来还是会回到刚开始的模样。

举个栗子:

<div id = "app">
	<p @click = "changeFood"> {{ food }} </P>
<div>

...
var app = new Vue({
	el: "#app",
	data: {
		food: "土豆"
	},
	methods:{
		changeFood: function(){
			this.food += "是马铃薯!"
		}
	}

})

重点记住this关键字,内部方法通过this关键字可以访问定义在data中的数据


显示切换,属性绑定:

v-show

根据后面表达式的真假,让元素显示或者隐藏
语法规则:v-show = “true / false / 定义在vue实例中data中的数据 / 表达式”
在这里插入图片描述
v-show指令的作用是:根据真假切换元素的显示状态
原理是修改元素的display值
指令后面的内容最终都会被解析成布尔值,true显示,false隐藏,数据与元素同步更新

v-if

根据表达式的真假切换元素显示状态,但是他操作的不是样式,而是直接操作DOM元素(与v-show的区别)因此频繁切换的元素用v-show,因为对DOM树进行操作性能消耗比较大

v-bind

专门用来操作属性的指令
语法规则: v-bind:属性名 = 表达式
v-bind可以直接省略
在这里插入图片描述
对象形式的意思就是,我active这个样式是否生效,取决于isActive的真假值


图像切换案例

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <style>
  #mask{
   width: 400px;
   height: 300px;
   border: 1px solid #000000;
   position: relative;
  }
  #mask img{
   width: 100%;
   height: 100%;
  }
  #mask button{
   width: 30px;
   height: 50px;
  }
  .left{
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
  }
  .right{
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
  }
 </style>
 <body>
  <div id="mask">
   <img :src="imgArr[index]" alt="">
   <button class="left" @click="prev" ><</button>
   <button class="right" @click="next" >></button>
  </div>
  
  <script src="js/vue.js"></script>
  <script>
   var app = new Vue({
    el:"#mask",
    data:{
     imgArr:[
      "image/03.jpg",
      "image/04.jpg",
      "image/05.jpg",
      "image/06.jpg",
      "image/07.jpg",
      "image/08.jpg",
      "image/09.jpg",
     ],
     index:0
    },
    methods:{
     prev:function(){
      if(this.index == 0){
       this.index= this.imgArr.length-1;
      }else{
       this.index--;
      }
      
     },
     next:function(){
      if(this.index == this.imgArr.length-1){
       this.index = 0;
      }else{
       this.index++;
      }
     }
    }
   })
   </script>
 </body>
</html>


列表循环,表单元素绑定

v-for

根据数据生成列表结构,并且是响应式

列表的生成依赖数据,结合的类型有数组、对象、数字、字符串等,最常用的是数组

语法规则: v-for=“item in arr” arr是我们要循环的数据名,和data里面的arr相对应, in不能修改, item是对应的每一项,可以改名,但要符合规则

v-for可以理解成,把作为模板的那个标签还有内部的所有内容,根据数据的个数,拷贝若干份
在这里插入图片描述
数组的索引值也可以利用起来,效果图如下

在这里插入图片描述
除了数组的形式,还有对象的形式,下面贴图,展示:

在这里插入图片描述

v-on(补充)

v-on可以自定义参数,事件修饰符

语法例子:@click = “doIt(p1,p2)”

@keyup.enter = “sayHi()” 键盘抬起事件,直接用事件修饰符即可,此句表示只有在回车键的时候才会触发这个逻辑

v-model(双向数据绑定)

获取和设置表单元素的值,十分便捷的把表单元素的值和实例中的数据关联起来

语法规则:v-model需要和表单元素一起使用 在表单元素(例如input)中写上v-model=“名称”

双向绑定:data中设置的message的值会在运行时传入到input表单里面,表单里面进行修改后,值会影响data里面的数据

代码写法如图:

在这里插入图片描述

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页