前言
Vue.js 是一种流行的 JavaScript 框架，被用于构建用户界面。它采用了响应式的数据绑定和组件化的开发模式，使得开发者能够更加高效地构建交互式的前端应用程序。
vue经常使用的构造选项
| el | 唯一根标签，决定Vue实例会管理哪一个DOM节点 |
| data | Vue实例对应的数据对象 |
| methods | 定义Vue实例的方法，可以在其他地方调用，也可以在指令中使用 |
| computed | 定义Vue实例的计算属性，可以在其他地方调用，也可以在指令中使用，本质是一个属性而不是一个函数，在调用时不用加小括号 |
| components | 定义Vue实例的子组件 |
| filters | 定义Vue实例的过滤器 |
| watch |
|
在创建Vue实例时，必不可少的一个选项就是el。el表示唯一根标签，用于指定一个页面中已存在的DOM元素来挂载Vue实例，即通过class或id选择器将页面DOM元素与Vue实例进行绑定。el的类型可以是string，也可以是HTMLElement。
使用el 绑定DOM元素
<div id="app">
{{msg}}
</div>
<script>
var vm=new Vue(){
le:"#app",
data:{
mag:"Vue实例绑定div成功"
}
}
</script>data概述
data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。
var app= new Vue({data: {数据}})，Vue通过这种方式监听了data内的数据修改，因此，只要data内的数据进行变动，视图层就会同步自动刷新。
对象（Object）的形式
<div id="app">{{content}}</div>
<script>
var app = new Vue({
el: "#app",
data: {
content: "Mustache表达式通过data为对象获取content的值"
}
})
</script>函数（Function）的形式
<div id="app">{{content}}</div>
<script>
var app = new Vue({
el: "#app",
// 这是下面function的简写形式
data(){
return {
name:'张三',
age:18
}
},
})
</script>methods方法
methods用来定义Vue实例中的方法，可以通过Vue实例直接访问这些方法。在定义的方法中，this对象指向Vue实例本身。通过methods定义的方法还可以作为页面中的事件处理方法使用，一旦事件被触发，即执行相应的方法进行处理。
在methods方法中访问 data 的数据，可以直接通过 this.属性名 的形式来访问，this表示Vue实例。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
1、第一步 引入vue.js
<script src="../js/vue.js"></script>
</head>
<body>
2、第二步
<div id="app">
<div>
{{msg}}
<p>tip:点击按钮把“旧文本”字样修改为“新文本”</p>
<!-- v-on 可以简写为 @ -->
<button v-on:click="btnClick">点击</button>
<!-- 简写形式 -->
<!-- <button @click="btnClick">点击</button> -->
</div>
</div>
<script>
3、第三步
var app = new Vue({
el: "#app",
data: {
msg: "旧文本"
},
// 页面的点击事件都需要放到 methods 里面
methods:{
btnClick(){
this.msg="新文本"
}
}
})
</script>
</body>
</html>指令
指令(Directives)是Vue.js模板中最常用的一项功能，HTML元素仅仅是界面的呈现，若还需要和Vue实例进行交互，就需要用到Vue.js的指令。在Vue.js中，指令必须写在HTML元素中，以前缀v-开头，后缀用来区分指令的功能，前缀和后缀通过短横线连接，它是Vue实例数据与用户界面之间的纽带。
Vue.js内置了很多指令，帮助开发者快速完成常见的DOM操作，譬如显示与隐藏、循环渲染等等，需要先了解一些常用的指令，如v-text、v-html、v-cloak、v-bind、v-on等。
v-text
v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。
v-html
v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。v-html指令更新节点元素的 innerHTML ，内容按照HTML格式进行解析，并且显示对应的内容。
v-bind
v-bind指令用于实现单向动态数据绑定。
前面学习的v-text和v-html指令主要作用是将值插入到模板标签的内容当中。但是，除了标签内容需要动态来渲染外，某些标签的属性也希望动态来绑定，这时就可以使用v-bind动态绑定属性。
v-on
v-on指令用来绑定事件监听器。在普通元素上，v-on指令可以监听原生的DOM事件(如click、dblclick、keyup、mouseover等)。
v-model
v-model指令主要用于实现表单元素和数据的双向绑定，通常用在表单类元素上(如input、select、textarea等)。所谓双向绑定，指的就是Vue实例中的data与其渲染的DOM元素上的内容保持一致，两者无论谁被改变，另一方也会相应的同步更新为相同的数据。
v-if和v-else
v-if是Vue.js的条件语句，v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true 值的时候被渲染。特别注意的是，v-if所关联的是Vue.js的动态变量。
v-if的使用一般有两个场景：
1.通过条件判断展示或者隐藏某个元素或者多个元素；
2.进行视图之间的切换。
v-show
v-show是另一个条件渲染语句，用于根据条件展示元素，用法与v-if大致一样。
带有v-show的元素始终会被渲染并保留在DOM中，v-show指令使用css样式来控制元素的显示/隐藏。值得注意的是，注意，v-show不支持<template>元素，也不支持v-else。
v-if和v-show的区别
v-if和v-show都可以用来动态地控制DOM元素的显示和隐藏，但是，二者是有区别的。v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；v-if 也是“惰性”的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
总结
学习完Vue.js后，我对它的总结是它是一款流行的JavaScript框架，采用MVVM架构模式，能够轻松管理和维护前端代码。
Vue.js的核心思想是响应式数据绑定，通过使用双向数据绑定，可以使数据和DOM保持同步，当数据发生变化时，DOM会自动更新，大大简化了前端开发的过程。
Vue.js具有简洁的语法和强大的功能。它使用了指令的概念，可以通过指令来控制DOM的行为，例如v-bind用于绑定属性，v-on用于绑定事件等。同时，Vue.js还支持组件化开发，可以将页面拆分成多个组件，提高了代码的可复用性和可维护性。
Vue.js还提供了丰富的生命周期钩子，可以在不同阶段插入自定义代码，实现更精细的控制。
除了核心功能外，Vue.js的生态系统也非常庞大，有大量的插件和工具可供选择，可以根据项目需要进行扩展和定制。
总的来说，学习Vue.js能够提升前端开发效率和质量，它的简洁语法和强大功能使得前端开发变得更加简单。
741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
