vue的安装与部署
- 引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--
或：<script src="https://cdn.jsdelivr.net/npm/vue"></script>
//min
-->- 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 ：
- 原理
- 先通过css样式隐藏内容，找到差值表达式编译完成后再显示类容。
v-text
- 向网页填充纯文本
- 无闪烁问题
- 用法：
- HTML: <div v-text="msg"> </div>
- VUE : data{ htm:"指令"}
v-html
- 向网页插入html片段
- 用法
- HTML: <div v-html="msg"> </div>
- VUE ： data{ htm:"<h1>指令<h1>"}
v-pre
- 显示原始信息，跳过编译过程
- 用法
- HTML： <div v-pre > {{msg}}</div>
v-once
- 只编译一次（显示内容之后就**不再具有响应式**）
- 不需要表达式v-model
- 数据双向绑定
- 用法
- HTML : <input type="text" v-model="name" />
- VUE ： data{ name: "[v-model指令]root" }
v-on
- 事件绑定
- 简写：@
- 语法 : v-on:事件名="事件处理"
- 用法
- HTML : <button type="button" @click="times++">点击次数【{{times}}】</button>
- VUE: data{ times:0 }
v-bind
- 属性绑定, 动态地绑定一个或多个特性，或一个组件 prop 到表达式。
- 在绑定
class或style特性时，支持其它类型的值，如数组或对象。 - 简写：:
- 用法
- HTML : <a v-bind:href="url" >百度一下</a>
- VUE : data{ url:"http://www.baidu.com" }
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>
- <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">...