一、概述 Vue 是一套用于构建用户界面的渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular（模块化）和React（虚拟DOM）的优点，虚拟DOM就是把DOM操作放到内存中执行。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 Vue采用MVVM模式，即Model-View-ViewModel模式，来管理应用程序状态和UI层。Vue.js的核心库只关注视图层，使得它非常轻巧，易于学习和集成到现有项目中。 核心是ViewModel层，负责转换Model中的数据对象，让数据变得更容易管理和使用，其作用如下：、 该层向上与视图层进行双向数据绑定 向下与Model层通过接口请求进行数据交互
二、vue实例的使用方式 1、vue实例的属性 el：用于指定Vue实例挂载的元素，可以是CSS选择器、HTML元素或已存在的DOM元素。 data：用于定义数据对象，包含了Vue实例中需要的各种数据。 methods：用于定义Vue实例中的方法，可以在模板中通过指令调用。 computed：用于定义计算属性，根据已有的数据计算出新的数据。 2、Vue实例的使用方法 创建Vue实例：通过new Vue()创建Vue实例，传入一个选项对象，包含el、data、methods、computed等属性。 let vueApp = new Vue({ el: '#app',//el--element,通过这个属性与对应的页面元素进行绑定/el====element data:{ msg: '欢迎使用vue'//data---我们这'vue对象的数据 }, methods:{//methods---我们这个vue对象的拥有的方法 // change:function (){} 两种方式作用一样 change(){ this.msg='123456'; } }, computed:{}//methods---我们这个vue对象的拥有的方法 }) 三、vue中的内置指令 - v-text 指令
它可以将元素的textContent属性与指令的值绑定在一起。通过使用v-text，Vue可以监视一个表达式的值，并在元素中显示更新后的值，而无需添加其他HTML标记。与使用{{}}插值语法相比，使用v-text指令具有一些优点。由于v-text只是使用textContent属性更新元素，因此可以预防XSS攻击，而{{}}可以通过解析某些HTML标记来引入潜在的XSS漏洞。
<div id="app">
<div v-text="msg"></div>
<a v-bind:title="biaoTi" :href="url">这是一个超链接</a>
</div>
<script>
let vueApp = new Vue({
el:'#app',
data:{
msg:'<h3>今天周二</h3>'
}
}) - v-html 指令
使用v-html指令时，可以将带有HTML标记的字符串作为指令值传递给它。Vue会将这个字符串解析为HTML，并将其插入到元素的innerHTML属性中。这种方法可以用来渲染带有HTML标记的动态内容，而不必通过其他手段将它们转换为纯文本
<body>
<div id="app">
<div v-text="msg"></div>
<div v-html="msg"></div>
<a v-bind:title="biaoTi" :href="url">这是一个超链接</a>
</div>
<script>
let vueApp = new Vue({
el:'#app',
data:{
msg:'<h3>今天周二</h3>',
biaoTi:'广州蜗牛',
url:'https://www.woniuxy.com'
}
})
</script>
与使用v-text指令相比，使用v-html指令可以让我们更轻松地渲染带有HTML标记的数据。v-text指令只是简单地将表达式的值绑定到元素的textContent属性上，而不会解析任何HTML标记。因此，当我们需要渲染带有HTML标记的数据时，应该使用v-html指令；反之，如果我们只需要渲染纯文本数据，则可以使用v-text指令。
- v-bind 指令
v-bind指令用于绑定HTML属性的值。使用v-bind指令时，可以将任意JavaScript表达式作为指令的值传递给它，Vue会将这个表达式的值作为HTML属性的值进行绑定。这个指令通常用于绑定HTML元素的动态属性，例如href、src、title等等。v-bind指令还可以使用简写形式":属性"，例如v-bind:title可以简写为:title。
<div id="app">
<a v-bind:title="biaoTi" :href="url">这是一个超链接</a>
</div>
<script>
let vueApp = new Vue({
el:'#app',
data:{
msg:'<h3>今天周二</h3>',
biaoTi:'广州蜗牛',
}
})
</script> - v-on 指令
v-on指令是Vue中的一种指令，用于绑定事件处理函数。使用v-on指令时，可以将任意JavaScript表达式或方法名作为指令的值传递给它，Vue会在对应的HTML元素上绑定相应的事件处理函数。例如，我们可以使用以下代码在<button>元素上绑定一个click事件处理函数：
<button v-on:click="showMsg('tom')">tom</button>
<button v-on:click="showMsg(name)">按钮2</button>
<button v-on:click="showMsg(555666)">按钮3</button>
</div>
<script>
let vueApp = new Vue({
el:'#app',
data:{
name:'alice'
},
methods:{
showMsg(param){
alert(param)
}
}
<button v-on:click="showMsg('tom')">tom</button>
在这里，v-on指令绑定到了<button>元素的click事件上，并指定事件处理函数showMsg。当<button>元素被点击时，Vue会调用showMsg函数来处理这个事件
v-on指令的修饰符
.stop：阻止事件冒泡，不再派发事件到更上层的元素。
<div v-show="flag" class="container" @click="method1()">
<button @click.stop="method2()">按钮</button>
在这个例子中，当点击按钮时不会触发父元素的点击事件。
.prevent：阻止事件的默认行为，例如表单提交等。
<a @click.stop.prevent="method3()" href="https://www.woniuxy.com">蜗牛学院</a>
在这个例子中，当点击超链接时不会跳转页面。
这里说明一下：
v-on:click 和 @click 都是 Vue 框架中用于绑定点击事件的指令，它们在功能上是完全等价的，没有任何区别。
@click 是 v-on:click 的缩写形式，使用它可以减少代码的冗余和提高代码的可读性 - v-show指令
v-show指令是Vue中用于显示和隐藏元素的一种非常方便的指令，它可以根据表达式的值动态地显示或隐藏元素，从而实现更高级的可视化效果
<div v-show="flag" class="container" @click="method1()"> - v-model指令
v-model 指令是 Vue 中常用的一种指令，用于在表单控件和 Vue 实例中的数据之间双向绑定。它实际上是v-bind 和 v-on 指令的结合体，既可以将数据绑定到表单控件的值，又可以侦听表单控件的输入事件，从而在数据发生变化时更新 Vue 实例中的数据，反之亦然。
{{age}}岁是<span v-if="age>=18">成年人</span><span v-else>未成年人</span>
<input type="text" v-model="age">
</div>
<script>
let vueApp = new Vue({
el:'#app',
data:{
age:15
},
methods:{
}
})
在这个例子中，在用户修改 input 输入框中的值时， {{}}里的值会随之改变。
- v-if和v-else指令
v-if和v-else是Vue.js中的条件渲染指令，用于根据指定条件来显示或隐藏某一部分DOM元素。 v-if指令会根据指定的条件进行条件判断，如果条件为真，则渲染对应的DOM元素；如果条件为假，则不渲染对应的DOM元素。 v-else指令需要紧跟在v-if指令后面使用，用于指定当v-if指令的条件为假时需要渲染的DOM元素。 {{age}}岁是<span v-if="age>=18">成年人</span><span v-else>未成年人</span> 需要注意的是，v-if和v-else指令只能用于同一父元素下的相邻元素之间 | 
万奢网手机版
