插值表达式

插值表达式（Interpolation）是一种在模板中输出数据的方式。它允许你将 Vue 实例中的数据绑定到 HTML 中，从而实现数据的动态显示。插值表达式通常使用双大括号 {{ }} 来包含要输出的数据。

Vue 实例，其中包含一个数据属性 msg,可以在 HTML 模板中使用插值表达式来输出这个数据

   <div id="app"><!--填充数据-->{{msg}}<!--简单运算-->{{1+2}}</div><script type="text/javascript">var vm = new Vue({ //vm变量 存储vue实例el: '#app', //元素的挂载位置(数据填充位置) 值是css选择器和dom元素data: {msg: 'hello world'} //data 数据值是对象})</script>

属性绑定

在 Vue.js 中，属性绑定（Property Binding）是一种将数据绑定到 HTML 元素属性的方法。这允许你动态地更新元素的属性，而无需手动操作 DOM。
Vue.js 提供了简洁的语法来实现这一点，通常使用 v-bind 指令，或者其缩写

	<div id="app"><!--动态属性绑定--><!--方法一: v-bind指令--><a v-bind:href="url">百度</a><!--方法二:缩写形式--><a :href="url">百度</a><button @click="changefn">切换</button></div><script type="text/javascript">//属性绑定var vm = new Vue({el: '#app',data: {url: "http:www.baidu.com"},methods: {changefn: function() {this.url = ""}}})</script>

双向数据绑定

概念: 双向数据绑定是指当数据发生变化时，视图会自动更新，而当用户在视图中输入数据时，数据也会自动更新。这种机制确保了数据和视图之间始终保持同步

使用 v-model 指令
v-model 是 Vue.js 中最常用的指令之一，它主要用于表单元素的双向数据绑定。当用户在表单元素中输入内容时，v-model 会自动更新绑定的数据，同时当数据发生变化时，表单元素也会自动更新。

	<div class="v"><p>{{msg}}</p><!--MVVM设计思想M (model): 模型 data中的数据V(view) :视图 本质 domVM(View-Model) view与model的结合  实现控制逻辑 将view与model结合在一起 --><input type="text" v-model="msg" /></div><script type="text/javascript">var vm = new Vue({el: '.v',data: {msg: '双向数据绑定'}})</script>

样式绑定

1. 使用 v-bind:class 绑定类名

对象语法
你可以将一个对象绑定到 class 属性上，对象的键是类名，值是布尔值，表示该类是否应该被添加到元素上。

<div :class="{ active: isActive, 'text-danger': hasError }"></div>

在这个例子中，active 类会在 isActive 为 true 时被添加，text-danger 类会在 hasError 为 true 时被添加。

数组语法
你还可以将一个数组绑定到 class 属性上，数组中的每个元素都是一个类名或者是一个包含类名和布尔值的对象。

<div :class="[isActive ? 'active' : '', errorClass]"></div>

在这个例子中，如果 isActive 为 true，则 active 类会被添加，同时 errorClass 的值（假设它是一个字符串类名）也会被添加为类名。

	<div id="app"><!--class样式--><!--对象语法  :class="{类名:属性(一般以is开头 说明该类名是否显示)}"--><div v-bind:class="{box:isBox,bgbox:isBgbox}">div内容</div><button v-on:click="changeClass">切换</button><!--数组语法--><div v-bind:class="[boxClass,bgBoxClass]">divdiv</div><button v-on:click="changeClass2">切换2</button></div><script type="text/javascript">var vm = new Vue({el: '#app',data: {isBox: false,isBgbox: true,boxClass: "box",bgBoxClass: "bgbox", //类名},methods: {changeClass: function() {this.isBox = !this.isBox;this.isBgbox = !this.isBgbox;},changeClass2: function() {// this.boxClass = "";this.bgBoxClass = "";}}})</script>

2 使用 v-bind:style 绑定内联样式

对象语法
你可以将一个对象绑定到 style 属性上，对象的键是 CSS 属性名，值是对应的属性值。

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

在这个例子中，color 样式会根据 activeColor 的值来设置，fontSize 样式会根据 fontSize 的值加上 ‘px’ 单位来设置。

数组语法
你还可以将一个数组绑定到 style 属性上，数组中的每个元素都是一个对象，每个对象都包含一些 CSS 属性名和对应的属性值。这些对象会被合并成一个样式对象应用到元素上。

<div :style="[baseStyles, overridingStyles]"></div>

在这个例子中，baseStyles 和 overridingStyles 会被合并成一个样式对象，如果 overridingStyles 中有与 baseStyles 相同的属性，则 overridingStyles 中的值会覆盖 baseStyles 中的值。

3 使用计算属性动态生成样式对象或类名数组

对于更复杂的样式逻辑，你可以使用计算属性来动态生成样式对象或类名数组。

<div :class="computedClass" :style="computedStyle"></div>
javascript
export default {data() {return {isActive: true,hasError: false,activeColor: 'red',fontSize: 14};},computed: {computedClass() {return {active: this.isActive,'text-danger': this.hasError};},computedStyle() {return {color: this.activeColor,fontSize: this.fontSize + 'px'};}}
};

在这个例子中，computedClass 和 computedStyle 是计算属性，它们根据组件的状态动态生成类名对象和样式对象。

4. 组合使用 v-bind:class 和 v-bind:style

在实际项目中，你经常需要同时使用 v-bind:class 和 v-bind:style 来实现复杂的样式绑定。

<div :class="classObject" :style="styleObject"></div>

在这个例子中，classObject 和 styleObject 分别用于绑定类名和样式，实现更加灵活的样式控制。

注意事项

当使用 v-bind:class 或 v-bind:style 时，你可以同时使用静态类名和静态样式，它们会与动态绑定的类名和样式合并。
对于内联样式，确保属性值是正确的 CSS 值，比如颜色值需要带上颜色单位（如 ‘px’、‘%’、‘em’ 等），颜色可以是颜色名、十六进制值、RGB/RGBA 值等。
在大型项目中，为了避免样式冲突和提高可维护性，建议使用 BEM（块元素修饰符）命名规范来组织 CSS 类名。```

指令 v-cloak

<style type="text/css">[v-vloak] {display: none;}</style>

	<div id="app"><!--填充数据-->{{msg}}<!--简单运算-->{{1+2}}<!--页面刷新会出现{{}}插值表达式 带vue编译完后显示数据 解决方案添加v-cloak的指令`   1:样式 v-vloak{dispaly:none}2:在插值表达式所在标签添加v-cloak原理: 先通过样式隐藏内鹅绒,然后再内存中进行值得替换,替换好之后再显示最终的结果--><div v-cloak>{{msg}}</div></div><script type="text/javascript">var vm = new Vue({ //vm变量 存储vue实例el: '#app', //元素的挂载位置(数据填充位置) 值是css选择器和dom元素data: {msg: 'hello world'} //data 数据值是对象})</script>

指令

Vue.js提供了一系列指令来帮助开发者更方便地操作和管理DOM元素。以下是一些Vue.js中常见的指令及其作用：

1: 内容处理指令:v-text, v-html ,v-once,v-pre
2: 属性绑定指令:v-bind, class绑定,style绑定

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

3: 条件渲染指令:v-if ,v-else-if,v-else,v-show
4: 列表渲染指令:v-for
5:事件处理指令
v-on
作用：监听DOM事件并执行一些JavaScript代码。v-on指令可以缩写为@符号。

<button v-on:click="doSomething">点击我</button>，或简写为<button @click="doSomething">点击我</button>。

事件修饰符
作用：为v-on指令提供事件修饰符，以改变事件触发的行为。

.stop：阻止事件冒泡。<button @click.stop="doSomething">点击我</button>
.prevent：阻止默认事件。<a href="http://www.baidu.com" @click.prevent="doSomething">百度</a>
.once：事件将只会触发一次。<button @click.once="doSomething">点击我</button>

<!--事件绑定写法:v-on指令 <input type="button" v-on:click='num++'/>v-on简写指令 <input type="button" @click='num++'/>--><div id="app"><p>{{num}}</p><!--v-on指令 事件调用--><input type="button" v-on:click='num++' value="点击" /><input type="button" @click='num++' value="点击2" /><!--事件函数调用方式1:直接绑定函数名称默认事件对象作为函数的第一个参数传递的--><input type="button" @click='clickNum' value="调用函数名称" /><!--2:调用函数默认事件对象作为最后一个参数传递的,并且事件对象的名称是$event--><input type="button" @click='clickNum()' value="调用函数" /><!--普通传参--><input type="button" @click='clickNum(123)' value="普通参数" /><!--传递事件对象参数  最后一个参数是事件对象--><input type="button" @click='clickNum(123,$event)' value="事件对象参数" /><!--事件冒泡--><div @click="maopao()"><!--传统的阻止事件冒泡--><!-- <button type="button" @click="stopmp">子元素{{num2}}</button> --><!--事件修饰符 阻止事件冒泡--><button type="button" @click.stop="childClick">子元素{{num2}}</button></div><!--阻止默认行为 多用于a标签和form表单中--><!-- <form action="" @submit.prevent="preventfn"><input type="text" value="" /><submit >提交</submit></form> --><a href="www.baidu.com" @click.prevent="preventfn">链接 </a></div><script type="text/javascript">var vm = new Vue({el: '#app',data: {num: 0,num2: 0},methods: {clickNum: function(p, event) {this.num++; //this值得是Vue实例对象// console.log(this === vm);console.log(p, event);},clickNum2: function() {},maopao: function() {this.num2++,console.log("父元素点击了");},stopmp: function(event) {event.stopPropagation();},childClick: function(event) {this.num2 += 2,console.log("子元素点击了");},preventfn: function() {console.log("阻止了默认事件");}}})</script>

6: 表单指令 v-model

	<div id="app"><div>{{msg}}</div><!--v-text 填充纯文本 比插值表达式更简洁--><div v-text="msg"></div><!--v-html 填充html片段不推荐使用 本网站内部使用,第三方数据不可以用--><div v-html="msg2"></div><!--v-pre填充原始数据显示原始信息,跳过编译过程--><div v-pre>{{msg}}</div><!--v-once的应用场景 : 显示的信息后续不需要再次修改将元素或组件的内容只渲染一次，并将其缓存起来。以后再次渲染时，该元素或组件的内容将不再重新计算。--><div v-once>{{msg3}}</div></div><script type="text/javascript">var vm = new Vue({ //vm变量 存储vue实例el: '#app', //元素的挂载位置(数据填充位置) 值是css选择器和dom元素data: {msg: 'hello world',msg2: '<h1>html</h1>',msg3: 'once  只编译一次'} //data 数据值是对象})</script>

按键修饰符

Vue中的按键修饰符主要用于监听键盘上的按钮被按下时触发对应的事件函数。

一、常用按键修饰符

.enter：捕获回车键（Enter）事件。
.tab：捕获Tab键事件，注意这个修饰符通常与keydown事件一起使用。
.delete：捕获删除键（Delete）和退格键（Backspace）事件。
.esc：捕获取消键（Escape）事件。
.space：捕获空格键（Space）事件。
.up：捕获上箭头键（Up Arrow）事件。
.down：捕获下箭头键（Down Arrow）事件。
.left：捕获左箭头键（Left Arrow）事件。
.right：捕获右箭头键（Right Arrow）事件。

二、系统按键修饰符

.ctrl：捕获Ctrl键事件，通常与其他按键组合使用。
.alt：捕获Alt键事件，通常与其他按键组合使用。
.shift：捕获Shift键事件，通常与其他按键组合使用。
.meta：在Mac系统键盘上对应Command键（⌘），在Windows系统键盘上对应Windows徽标键（⊞）。

  <form action=""><!--按下enter键触发--><label for="name">姓名</label><input type="text" v-model="name" id="name" @keyup.enter="submitBtn" /><!--按下delete键触发--><label for="">姓名</label>年龄<input type="text" v-model="age" id="age" @keyup.delete="delBtn" /><!--自定义按键修饰符--><input type="text" v-model="num" @keyup.ff="numBtn" /><input type="button" value="提交" @click="submitBtn" /></form><script type="text/javascript">//自定义按键修饰符 // 规则 自定义按键修饰符名字是自定义的,但是对应的值是按键对应event.keyCode值,也可以直接用@keyup.keyCode值//可以通过全局config.keyCodes 对象自定义按键修饰符别名Vue.config.keyCodes.ff = 65var vm = new Vue({el: '#app',data: {name: '',age: '',num: ''},methods: {submitBtn: function() {console.log(this.name);},delBtn: function() {this.name = "",this.age = ""},numBtn: function(event) {console.log(event.keyCode);},}})</script>

三、注意事项

按键修饰符通常与v-on指令一起使用，可以简写为@符号。
大部分按键都可以使用按键修饰符，但多个单词的按键需要改名为短横线命名，例如PrintScreen按键需要改为print-screen才能使用。
在使用系统按键修饰符（如Ctrl、Alt、Shift、Meta）时，需要确保用户同时按下了这些键和其他按键才能触发相应的事件。
Vue还提供了.exact修饰符，用于控制由精确的系统修饰符组合触发的事件。例如 <button v-on:click.ctrl.exact="onCtrlClick">A</button>表示只有Ctrl键被按下时才触发onCtrlClick方法。