Vue.js基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43809506/article/details/107374363

关于vue的基本知识

（接下来就是我那些没什么用的笔记了）

1.一个vue文件的最基础模板

<template>
  <div></div>
</template>
<script></script>
<style></style>

因为用的是scss，所以要变成<style lang="scss" scoped>，scoped代表着这个样式是在局部有效，如果不加就会变成全局样式。

import Vue from 'vue' // 导入Vue用于生成Vue实例
import Hello from '@/components/Hello' // 导入组件

const Constructor = Vue.extend(Hello) // 获得Hello组件实例
const vm = new Constructor().$mount() // 将组件挂载到DOM上

2.vue指令

v-text（textcontent）内容绑定，事件绑定
但是这里字符串的拼接的话要用单引号，eg： <h2 v-text="message+'999'"></h2> 。不能像插值表达式那样直接加eg:{{message}}999，要用字符串的拼接

插值表达式:{{message}}
因为没有引号，所以单双引号都行。
eg：{{message+"!!"}}或者{{message+‘！’}}
v-html（innerHtml）
有HTML结构就用这个，没有就用v-text就可以了
v-on为元素绑定事件，显示切换，属性绑定
eg：<input type="button" value="事件绑定" v-on:事件名(或者写成@事件名)=“dolt”>
(ps：methods，el，data是平级关系)

el：挂载点
data：数据
methods：方法
(见4.2有代码)
eg:

methods:{
dolt:fuction
}

<input type="button" value="事件绑定" v-on：click="方法">
<input type="button" value="事件绑定" @click="方法">
<input type="button" value="事件绑定" v-on:mouseenter="方法">
<input type="button" value="事件绑定" v-on:dbclick="方法">//双击

v-on补充
（传递自定义参数；事件修饰符）

v-show操纵样式，指令后面的内容最终会被解释为布尔值
和v-if是不一样的
v-show是一直都有渲染，只是没有显示出来
v-if会引起重排，v-show只会引起重绘
频繁切换的元素用v-show，反之用v-if，有时候用v-if去做频繁切换的时候，数据渲染跟不上，就会做不到回显。
v-if操纵dom元素，为false的时候，把元素从dom树中移除，消耗比较大
v-bind设置元素的属性
格式：v-bind:属性名=表达式
写的时候可以省略v-bind，直接冒号开始就行（是表达式的时候才这样用，:src=“issrc”。不是的时候src="…/first-exercise/1.jpg"）
包含的属性：src，class，title（就是把鼠标放上去显示的东西）
v-for列表循环，表单绑定，一般会加一个具有唯一性的key来保证checkbox跟内容进行了一个关联，是为了高效的更新虚拟DOM，key属性的类型只能为 string或者number类型。（如果不加key，vue就会直接报错）

<ul>
   <li v-for="item in arr">
       {{item}}
   </li>
</ul>

 data:{ 
 		arr:["a","b","c"]
      }

（ul是无序，ol是有序order list，index是数组的标签）
进阶：(这里的info是全局获得的一个数组)

  <tr v-for="(item, index) in info" :key="index">
     <td>{{item.name == '' ? '无':item.name}}</td>
  </tr>

备注：

三元表达式

xx==‘1’?‘2’:'3’这里是三元表达式,意思就是xx=1吗，等于1就返回2，不等于就返回3。
而且三元表达式还可以嵌套，一般不会嵌套多个，嵌套一个就差不多了，例如
xx==‘1’?‘2’:(yy==‘3’?‘4’:‘5’)意思就是xx==1吗，等于就返回2，不等于就进行后面的判断yy=3吗，等于就返回4，不等于就返回5。所以假如xx=4，yy=4，那么这条式子就会返回5。

v-model获取和设置表单元素的值（双向绑定！）核心！

 <input type="text" name="" id="" v-model="jishiben" @keyup.enter="jishi('牛逼')">

3.修饰符

.stop - 调用 event.stopPropagation()。
.prevent - 调用event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self -只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} -只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive:true } 模式添加侦听器
input事件是实时监控的，每次输入都会调用，而@keyup.enter事件则是在pc上需要点击回车键触发

4.选择器

id；#是id选择器
class；.是class选择器
在挂载点那里使用，eg:

<script>
   var app=new Vue({
        el:"#app",//el是设置vue示例挂载的元素
        data:{} ,      
        methods:{},
    })
 </script>

一般选用id选择器，因为约定俗成是id唯一的，class可能会有多个导致不清晰，但是也要看情况使用。

id是先确定页面的结构和内容，然后再为它定义样式：而class相反先定义一类样式，然后再页面中根据需要把类样式应用到不同的元容素和内容上面。–来源百度百科-CSS语法

标签选择器；

5.其他

数组的更改:
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

pop() 方法用于删除并返回数组的最后一个元素。
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

sort() 方法用于对数组的元素进行排序。

reverse() 方法用于颠倒数组中元素的顺序。
img 里面那个alt=“代替文本”是表示，如果无法显示图像，将显示替代文本