VUE简明教程

2023-11-12 16:02:04

一：VUE基础

1: 项目搭建

VUE create 项目名称

1.1 创建步骤

1.2 使用空格键选择相应选项

上面两个选项随便选一个。

2：运行项目

安装完后进入项目的根目录，运行npm run serve即可启动项目

访问地址 localhost:8080

2:基本指令

2.1 声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

Mustache {{}}

vue在渲染界面时，页面先以{{xxXXX}}的形式加载到页面，然后再用数据替换{{}}.

Mastach表达式调用三种数据格式类型：

2.1.1 调用单值数据

<template>
  <div class="home">
    <!-- 调用变量 -->
    {{msg}}  <br/>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      msg: 'hello world'
    }
  }
}
</script>

2.1.2 调用数组数据

<template>
  <div class="home">
    <!-- 调用数组 -->
    {{fav[0]}}--{{fav[1]}}<br/>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      fav: ['java','vue']
    }
  }
}
</script>

2.1.3 调用对象数据

<template>
  <div class="home">
    <!-- 调用对象 -->
    {{student.name}} -- {{student.age}}
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      student:{'name':'xm','age':234}
    }
  }
}
</script>

2.2 指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute , 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM 。

v-if v-show

v-if 指令将根据表达式的值真假来插入/移除元素

<template>
  <div class="home">
    <p v-if="seen">现在你看到我了</p>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
       // 次数seen为false,那么v-if 则成为 vi-if="false"
      seen: false | true // false true只选择一个
    }
  }
}
</script>

Tips

v-if和v-show区别

V-if: 对dom节点进行删除和增加

V-show: 通过css控制节点的隐藏和显示

如果隐藏/显示位置切换不是特别频繁的话，建议还是使用v-if，反之如果切换频繁则使用v-show

v-bind

能够接收一个“参数”，在指令名称之后以冒号表示。v-bind 指令可以用于响应式地更新

<template>
  <div class="home">
    <a v-bind:href="url">{{website}}</a>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      website: '新浪',
      url: 'http://www.sina.com'
    }
  }
}
</script>

在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定

动态参数绑定，[attributeName]可根据需要动态设置

<a v-bind:[attributeName]="url"> ... </a>

如下列代码：

<template>
  <div class="home">
    <a v-bind:[attri]="attriVal"> clike me</a>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return{
      attri:'href',
      attriVal:'http://www.sina.com'
    }
  }
}
</script>

缩写

v-bind 可一律缩写为 " : " ,

如：
<a :href="url"> clike me</a>

v-on

v-on 指令，它用于监听 DOM 事件

<template>
  <div class="home">
  	<!-- showHello是事件执行的方法函数;click是事件类型 -->
    <a v-on:click="showHello"> clike me</a>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods:{
   // 出发点击事件后，执行showHello函数
    showHello(){
      alert("hello world")
    }
  }
}
</script>

缩写

v-on 可一律缩写为“ @ ”

如上例
<a @click="showHello"> clike me</a>

v-for

v-for用于对一个数组来渲染一个列表，因此被称为"列表渲染" , 需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名

遍历数组：

<template>
  <div class="home">
    <ul  >
        <!-- index:当前项的索引 -->
      <li v-for="(item,index) in students" :key="index">
          {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return{
      students:['xm','lm','aa']
    }
  }
}
</script>

遍历集合

<template>
  <div class="home">
    <ul  >
      <li v-for="(item,index) in stus" :key="index">
          {{item.name}}--{{item.age}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return{
      names:['xm','lm','aa'],
      stus:[{'name':'xm',age:23},{'name':'lm',age:33}]
    }
  }
}
</script>

遍历对象的属性和值

<template>
  <div class="home">
    <ul  >
      <li v-for="(value,name,index) in stus" :key="index">
        {{name}}--{{value}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return{
      names:['xm','lm','aa'],
      stus:{'name':'xm',age:23}
    }
  }
}
</script>

建议：

v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。所以，我们应尽可能在使用 v-for 时提供 key attribute ，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素

不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

v-model

在表单 、 及 `` 元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素， v-model 本质上是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。

<template>
  <div class="home">
   <input v-model="message" placeholder="edit me" />
  <p>Message is: {{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return{
     message:'hello'
    }
  }
}
</script>

2.3 事件修饰符

在此我们只列举常用的4中事件修饰符：分别是 stop阻止冒泡；prevent 阻止标签默认行为；self 只监听自身标签的事件；once 只执行一次

1：stop阻止冒泡

B-DIV是A-DIV的子组件，当对B执行事件时，事件会向上冒泡，导致ADIV区域相关事件元素同样被你执行

未完待续…

码农公寓