1.vue的基本用法
（1）vue.js之HelloWorld基本步骤
<div id = "app">
<div> {{ msg }} </div> /*提供标签，用于填充数据*/
</div>
<script type="text/javascript" src="js/vue.js"></script> /*引入vue.js文件*/
<script type="text/javascript">
new vue ({ /*使用vue语法完成功能*/
el:"#app",
data:{
msg:"helloworld" /*把vue提供的数据填充到标签里*/
}
})
</script>
(2)细节分析
- 实例参数分析
el：元素的挂载位置（值可以是css选择器/dom元素）
data：模型数据（值是一个对象）
- 插值表达式用法
将数据填充到html标签中 {{ msg }}
支持基本计算操作
- 代码运行原理
编译过程（vue语法——原生语法）
2.vue模板语法
（1）概述
- 前端渲染，把数据填充到html标签中
- 前端渲染方式：原生js拼接字符串
使用前端模板引擎
使用vue特有的模板语法
- 语法：插值表达式
指令
事件绑定
属性绑定
样式绑定
分支循环结构
（2）指令
- 本质是自定义属性，以v-开始（如v-cloak）
- v-cloak指令：解决插值表达式中的“闪动”问题；原理：先隐藏，替换好值后再显示最终的值
- 数据绑定指令：v-text,填充纯文本，相比插值表达式更简洁
v-html，填充html片段，存在安全性问题，本网站内部数据可用，来自第三方数据不可用
v-pre，填充原始信息。显示原始信息，跳过编译过程
- 数据响应式
数据的变化导致页面内容的变化
v-once：只编译一次，显示内容后不再具有响应式功能
（3）双向数据绑定
- v-model指令：<input type="text" v-model="uname"/>
- MVVM设计思想：提供对view和viewModel的双向数据绑定，这使ViewModel的状态改变可以自动传递给view，即所谓的数据双向绑定
M（model）——数据
V（view）——document元素
VM（view-model）——控制逻辑
（4）事件绑定
- vue如何处理事件：v-on指令 <input type="button" v-on:click="num++"/>
v-on简写 <input type="button" @click="num++"/>
- 事件函数的调用方式：直接绑定函数名称 <button v-on:click="say"> hello </button>
调用函数：<button v-on:click="say()"> say hi </button>
- 事件函数参数传递：普通函数和事件对象 <button v-on:click="say("hi", $event)"> say hi </button>
- 事件修饰符：.stop阻止冒泡 <a v-on:click.stop="handle"> 跳转 </a>
.prevent阻止默认行为 <a v-on:click.prevent="handle"> 跳转 </a>
- 按键修饰符：.enter回车键 <input v-on:keyup.enter="submit">
.delete删除键 <input v-on;keyuo.delete="handle">
- 自定义按键修饰符：全局config.keycode对象 vue.config.keycodes.f1 = 112