特点
Vue是目前流行的一款前端框架，总的来看Vue具有如下三个特点：
- 组件化：
Vue鼓励开发者将用户界面分解为可重用的组件。这些组件可以使开发的页面更加模块化和可维护。 - 双向数据绑定：
Vue提供了一种轻松绑定数据和DOM元素之间的机制。这意味着当数据发生变化时，视图会自动更新，反之亦然。 - 虚拟DOM：
Vue使用虚拟DOM来最小化实际DOM更新的次数，从而提高性能。
生命周期钩子
Vue 实例在创建时都要经过一系列的初始化过程，例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户在不同阶段添加自己的代码的机会。
常用的生命周期钩子包括：
- created：在实例创建完成后被立即调用。
- mounted：实例被挂载后调用。
- updated：当实例更新完毕之后调用。
- destroyed：实例销毁后调用。
new Vue({
data: {
message: 'Hello, Vue!'
},
created() {
console.log('实例已创建');
},
mounted() {
console.log('实例已挂载');
},
updated() {
console.log('实例已更新');
},
destroyed() {
console.log('实例已销毁');
}
});数据绑定
使用{{ data }}在模板中插入数据。如下
<body>
<div id="app">
<!-- 表达式 -->
<h1>{{message}}</h1>
</div>
<script>
// 创建Vue的实例
new Vue({
// 绑定id为app的元素
el: "#app",
// 数据
data: {
message: "hello Vue!"
}
})
</script>
</body>数据操作
数据操作有三种，计算(computed)、侦听(watch)、方法(methods)。
计算(computed)
Vue允许开发者定义计算属性，这些属性根据其他数据属性的值进行计算。而计算属性会缓存计算结果，只有在依赖的数据属性发生变化时才会重新计算。
<body>
<div id="app">
<input type="text" v-model="radius">
<p>圆的面积：{{ circleArea }}</p>
</div>
<script>
new Vue({
el:"#app",
data: {
radius: 5
},
computed: {
circleArea: function() {
return Math.PI * Math.pow(this.radius, 2);
}
}
});
</script>
</body>侦听(watch)
watch选项来监听数据属性的变化，然后执行自定义的操作。
<body>
<div id="app">
<input type="text" v-model="radius">
<p>圆的面积：{{ circleArea }}</p>
</div>
<script>
new Vue({
el:"#app",
data: {
radius: 0,
circleArea:0
},
watch: {
radius:function(newValue,oldVule){
console.log(newValue)
this.circleArea = Math.PI * Math.pow(newValue, 2);
}
}
});
</script>
</body>方法(methods)
methods是指Vue实例中methods字段所定义的函数，其主要用于执行特定的操作或逻辑。
<body>
<div id="app">
<button @click="sayHello">Say Hello</button>
<button @click="greet('John')">Greet John</button>
</div>
<script>
new Vue({
methods: {
sayHello: function() {
console.log('Hello, Vue!');
}
greet: function(name) {
console.log('Hello, ' name '!');
}
}
});
</script>
</body>指令
v-model：用于实现双向数据绑定，通常用于表单元素，使输入框的值与数据属性保持同步。
<input v-model="message"> v-for：用于循环渲染列表中的元素，通常与v-bind:key一起使用。
<ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> v-if、v-else、v-else-if：用于条件渲染，根据条件决定是否渲染或显示DOM元素。
<p v-if="isTrue">This is true</p> <p v-else>This is false</p> v-show：用于根据条件切换元素的可见性，与v-if不同，它仅使用CSS样式控制显示/隐藏，不会添加/删除元素。
<p v-show="isVisible">This may be hidden</p> v-bind（缩写为:） ：用于绑定HTML属性的值到Vue实例的数据属性，以实现动态属性绑定。
<a :href="url">Visit Vue.js</a> v-on（缩写为@） ：用于监听DOM事件，当事件触发时执行Vue实例的方法。
<button @click="doSomething">Click me</button> v-once：用于标记元素和其子元素只渲染一次，后续的数据变化不会影响它们。
<p v-once>{{ message }}</p> 
