VUE基础

vue的安装与部署

  1. 引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--
 或：<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 //min	
-->
  1. dem
<body>
	<!-- {{}} ： 插值表达式， 支持简单的表达式计算-->
	<div id="app">{{msg}}</div>
	
	<script type="text/javascript">
		var vm = new Vue({
            
			// 元素的挂载位置（可以是css选择器，DOM元素）
			el:"#app",	
            
			// 模型数据（对象类型）
			data:{	
				msg:"hello world"
			},
		});
		
	</script>
</body>

Vue模板语法

  • 差值表达式
  • 指令
  • 事件绑定
  • 属性绑定
  • 样式绑定
  • 分支循环结构

指令

  • 指令的本质就是自定义属性

  • 指令的格式: 以 v- 开始（eg: v-cloak）

  • 常用指令

v-cloak

  • 这个指令保持在元素上直到关联实例结束编译。( 解决了 差值表达式的闪烁问题 )
  • 不需要表达式 ( 无值 )
  • 用法：
    • CSS ：[v-cloak] { display: none }
    • HTML: <div v-cloak> {{ msg}} </div>
  • 原理
    • 先通过css样式隐藏内容，找到差值表达式编译完成后再显示类容。

v-text

  • 向网页填充纯文本
  • 无闪烁问题
  • 用法：
    • HTML: <div v-text="msg"> </div>
    • VUE : data

v-html

  • 向网页插入html片段
  • 用法
    • HTML: <div v-html="msg"> </div>
    • VUE ： data

v-pre

  • 显示原始信息，跳过编译过程
  • 用法
    • HTML： <div v-pre > {{msg}}</div>

v-once

- 只编译一次（显示内容之后就**不再具有响应式**）
- 不需要表达式

v-model

  • 数据双向绑定
  • 用法
    • HTML : <input type="text" v-model="name" />
    • VUE ： data

v-on

  • 事件绑定
  • 简写：@
  • 语法 : v-on:事件名="事件处理"
  • 用法
    • HTML : <button type="button" @click="times++">点击次数【{{times}}】</button>
    • VUE: data

v-bind

  • 属性绑定, 动态地绑定一个或多个特性，或一个组件 prop 到表达式。
  • 在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。
  • 简写：:
  • 用法
    • HTML : <a v-bind:href="url" >百度一下</a>
    • VUE : data

v-if

  • 分支结构

v-else-if

  • 分支结构
    <!-- （if,else-if,else）要紧挨着写 -->
    <div v-if="score>90">if：优秀，{{score}}</div>
    <div v-else-if="score>60">else-if：及格，{{score}}</div>	
    <div v-else>else:不及格，{{score}}</div>

v-else

  • 分支结构

v-show

  • v-show控制的是样式（display），即浏览器直接渲染。（控制元素是否显示）

  • v-if/else-if/else是在VUE编译后，将判断结果交给浏览器渲染（控制元素是否渲染到页面）

  • v-show=“false ” =>display:none;

事件

事件绑定

  • 相关指令：v-on 【简：@】
  • 事件函数的调用方式
    • 方式一
      • <button type="button" @dblclick="consoleLog">事件函数调用1【直接绑定函数名称】</button>
    • 方式二
      • <button type="button" @dblclick="consoleLog()">事件函数调用2【调用函数】</button>
    • 区别：
      • 方式一：无法传参（但默认传入事件对象$event给第一个形参）
      • 方式二：需要自动传入事件对象$event【位置：最后一个形参】
        • <button type="button" @dblclick="consoleLog("参数1",$event)">事件函数</button>

事件修饰符

.stop
  • 阻止事件冒泡
    • <button type="button" @click.stop="times++">子元素{{times}}</button>
.prevent
  • 阻止默认行为
    • <a href="www.baidu.com" @click.prevent.stop ="">百度</a>
.self

  • 当前元素自身时触发处理函数 ( 事件冒泡会不触发 )

    • <div @:click.self="doThat">...
.once
- 只触发一次回调
其他修饰符
  • .capture - 添加事件侦听器时使用 capture 模式。
  • .left - (2.2.0) 只当点击鼠标左键时触发。
  • .right - (2.2.0) 只当点击鼠标右键时触发。
  • .middle - (2.2.0) 只当点击鼠标中键时触发。
  • .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
修饰符的顺序

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生

用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

按键修饰符

- Vue 允许为 `v-on` 在监听键盘事件时添加按键修饰符
.enter
  • 回车键
    • <input type="text" value="按键【enter】修饰符" @keyup.enter="myAltert('提交成功')"/>
.delete

  • 删除键

    • <input type="text" value="按键【enter/delete】修饰符" @keyup.enter="myAltert('提交成功')" @keyup.delete="del" />
自定义按键修饰符别名
  • Vue.config.keyCodes.f1 = 112 // 全局

属性绑定

  • 相关指令：v-bind

Class与Style绑定

  • Class绑定
        <!-- 绑定一个class-->
        <span :class="'underline'">underline</span>

        <!--绑定多个class(数组，对象)-->
        <!--isActive：true //underline是否起作用 (underline,setColor为class名) -->
        <span :class="{underline:isActive,setColor:isActive}">对象</span>

        <span :class="['underline','setColor']">数组</span>
  • 注意
    • 对象和数组可以结合使用
      <span :class="[underline,{setColor}]">数组+对象</span>
      <span :class="{underline:isActive,[setColor]:isActive}">对象+数组</span>

- 可以将对象和数组写在data中
- 原来的class不会被覆盖
  • Style绑定
<!-- 对象形式-->
<div :style="{color:'cyan',backgroundColor:'grey'}">background-color</div>
<!-- 数组形式-->
<!--fontStyle，borderStyle是data中的对象 -->
<div :style="[fontStyle,borderStyle]">数组</div>

分支循环结构

分支结构

  • 分支语句

    • v-if
    • v-else
    • v-else-if

  • 注意其与v-show的本质区别

循环结构

  • 循环语句
    • v-for
    • key ：帮助Vue区分不同元素，从而调高性能
      数组遍历：<br/>
     <div v-for="item in clazz">{{item}}</div><br>
     明星榜：
     <ol>
        <li v-for="(item,index) in starts">{{item}} 【索引为：{{index}}】</li>
     </ol>
    			
     明星榜2：(key)
     <ol>
        <li :key="index" v-for="(item,index) in starts">{{item}} 【索引为：{{index}}】</li>
    </ol>
    
    
    对象遍历
    <div v-for="(value , key,index) in styleObj"> {{key}}:{{value}},【序号:{{index}}】</div><hr>
    <div v-for="value in styleObj">{{value}}</div><hr>
    <div v-for="(value,key) in styleObj">{{key}} : {{value}}</div>

分支循环

  • v-if与v-for联合使用
  • 当和 v-if 一起使用时，v-for 的优先级比 v-if 更高
    <li :key="index" v-for="(item,index) in starts" v-if="index%2==0">{{item}} </li>

数据响应式

- （data中）数据的变化导致网页内容的变化。
- 指令，差值表达式进行的数据绑定，默认 为响应式的
- 相关指令： v-once

数据绑定

- 将数据填充到网页中
- 相关指令：v-text , v-html

双向数据绑定

- 相关指令：v-model
posted @ 2020-03-01 15:31  Tolbert  阅读(115)  评论(0)    收藏  举报