Vue入门基础

最新推荐文章于 2023-05-17 19:46:30 发布

hbzyin

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB开发入门

本文链接：https://blog.youkuaiyun.com/hbzyin/article/details/79184486

WEB开发同时被 2 个专栏收录

3 篇文章

订阅专栏

入门

3 篇文章

订阅专栏

本文详细介绍Vue.js的模板语法、条件与循环、计算属性、样式绑定、事件处理等核心功能，以及表单、组件、自定义指令和路由等高级特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

## Vue语法

1.Vue.js模板语法

插值语法

①文本插值：数据绑定{{}},如：<p>{{messega}}</p>；

②html插值：使用v-html指令输出html代码，如<div v-html="message"><div>;

③属性绑定：使用v-bind指令，如：<div v-bind:class="{'className':boolean}"></div>;

④表达式：完全支持JavaScript表达式；方式1:采用{{}},方式二：采用v-bind,如：{{5+5}}、<div v-bind:id="'list-'+index"></div>;
指令
⑤指令：指令是带有v-前缀的特殊属性，如：v-if、v-bind；

⑥参数：参数在指令后用冒号:指明，如：<a v-bind:src="hhtp://baidu.com">url</a>;

⑦修饰符：修饰符是以半角句号.指明的特殊后缀，用于指出一个指定应该以特殊方式绑定，如.prevent修饰符告诉v-on指令对于触发的点击事件调用event.preventDefault(),如：<button v-on:prevent="onClick">点击</div>；

⑧用户输入：用户输入字段可以用v-model指令来实现双向数据绑定,如：<input v-model="data">;
过滤器
过滤器：过滤器采用管道符号|，过滤器本质是一个函数，如：{{ data | filterA | filterB(arguments)}}、<div v-bind:id="idData | format"></div>；
缩写：vue为最长用的两个指令提供了缩写，如<a v-bind:src="url"></a>缩写为<a :src="url"></a>;<a v-on:click="fn"></a>缩写为<a @click="fn"></a>;
实例
①构造器：每个vue应用都是通过构造函数vue()创建一个vue的根实例来启动的；
②属性、方法：每个vue实例都会代理data对象里所有的属性(双向数据绑定)，同时也拥有实例的属性和方法，这些实例的属性、方法用$与data对象里的属性、方法做区分(单向数据)；

var person={name:'Jhon',age:22};
var app=new Vue({
  data:person
});
consoel.log(person.age);//22
consoel.log(app.age);   //22
<!-- data.$age -->

2. vuet条件与循环

条件判断：
1. 条件判断语句：v-if指令
2. else语句：v-else指令
3. else-if语句：v-else-if指令
4. 展示判断：v-show指令
循环语句：
1. 循环语句：v-for指令，如：v-for=item in list、v-for=(value,key,index) in object、v-for="n in 10"、v-for="n in [1,23]"
计算属性computed类似于method，在效果上两者是一样的；但method是通过页面事件触发人为去改变属性值，但computed是基于缓存的，只有相关依赖发生改变是才会重新取值；computed属性默认只有getter但可人为添加setter方法；

4. 样式绑定

html的class和syle属性都是用来设置元素的样式，vue中采用v-bind:class、v-bind:style进行绑定，并且进行了增强，表达式结果可以为string 、array、object;如：

类样式：class

  <div class="static" v-bind:class="{active:isActive,'err':isErr}"></div>
 <div v-bind:class="[static err active]"></div>
 <!-- 编译结果均为： <div class="static active err"></div> -->

内联样式:style

使用v-bind：style绑定的内联样式，vue会自动检测并添加响应的前缀

<div v-bind:style="{color:red,fontSize:fontSize+'px'}"></div>
<div v-bind:style="[obj1,obj2]"></div>
<!--编译结果均为： <div style="color:red;font-size:13px;"></div> -->

5. 事件处理

vue应用采用v-on来监听事件，此外vue提供了事件修饰符老处理DOM事件细节；并添加了按键修饰符来监听键盘事件；此外修饰符可以串联使用；

事件修饰符：.stop、.prevent、.capture、.self、once

<!-- 1.阻止事件冒泡 -->
<a v-on:click.stop="callFn"></a>
<!-- 2.提交事件不重载页面 -->
<form v-on:submmit.prevent="onSubmmit"></form>
<!-- 3. 添加事件监听器是使用事件捕获模式 -->
<div v-on:click.capture="callFn"></div>
<!-- 4. 只在事件元素本身触发时触发回调（阻止事件冒泡、捕获） -->
<div v-on:click.slef="callFn"></div>
<!-- 5. 事件只能点击一次 v2.1.4版本 -->
<a v-on:click.once="callFn"></a>
<!-- 6. 修饰器串用 -->
<div v-on:click.stop.prevent></div>

按键修饰符

通过调用阿年keycode来进行修饰，同时vue提供了常用13个按键的别名，如
enter、tab、delete、esc、space、up、down、left、right、ctrl、alt、shift、meta，如：
<div v-on:keyup.13></div><div v-on:keyup.enter></div>

6. vue表单

1.双向数据绑定

vue 使用v-model指令在表单空间元素上创建双向数据绑定，此时v-model会根据空控件类型自动选择正确的方法来更新元素；如：

<input v-model="name">
<span>{{name}}</span>

修饰符：.lazy、.number、.trim

默认情况下v-model在input事件中同步输入框的值与数据，同时用户可以添加一个修饰符lazy，从而将数据转变为在change事件中进行同步；同时用户可以给v-model添加.number使输入值自动转变为 Number类型；也可以添加.trim修饰符使输入值自动过滤首尾的空格；如：

<input v-model='name'/>
<input v-model.number="age"/>
<input v-model.trim="text">

7.vue组件

同angular、react一样，vue采用组件化；组件可以扩展html元素，封装可重用的代码；使得用独立可重复的小组件来构建大型应用成为可能；

注册全局组件：Vue.component(tagName,options)、html中使用<tagNAme></tagName>
局部组件：new Vue({el:'container',component:{'childCom':Child}})
Prop：父组件用来传递数据的一个自定义属性；该属性可以传递给子组件，子组件如需使用，需要显式的用props声名prop属性,如：

  <div id="app"><child message="data from parentCom"></child></div>
  <script>
    Vue.componet('child',{props:['message'],template:'<span>{{message}}</span>'});
    new Vue({el:#app})
  </scipt>

动态prop:父组件中通过v-bind动态绑定的数据，当该数据变化时，变化也会传递给子组件；
Prop验证：组件可以通过type属性给prop设置验证，同时也可以通过validator自定义验证方法；
自定义事件：父组件使用props向子组件传递数据，子组件向父组件传递数据需要使用自定义事件。可以使用v-on绑定自定义事件；每个Vue实例都实现了事件的接口(Events interface)，①$on(eventName)：监听事件；②$emit(eventName):广播事件；

  <div id="app">
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
</div>
<script>
Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})
</script>

自定义指令
除了使用vue内置核心指令(v-model、v-show),Vue也用于用户注册自定义的指令，①全局指令：Vue.directive('dirtName',{})；②组件内指令：new Vue({el:'#app',directives:{}});
1. 钩子函数：自定义指令提供了5个钩子函数：
- bind:只调用一次，指令第一次绑定到元素时使用，可以用来执行初始化动作；
- inserted:被绑定元素插入父节点时调用；
- update:被绑定元素所在的模板更新时调用，不论绑定值是否变化；
- componentUpdated:被绑定元素所在模板完成一次更新时使用；
- unbind:只调用一次，指令与元素解绑时调用；
路由

vue.js+vue.router可以很简单的实现单页应用，vue-router会根据配置组件和路由映射，告诉vue-router在哪里进行渲染；