Vue双向数据绑定
Vue的双向数据绑定机制通过v-model指令极大地简化了表单数据的处理过程，使得开发者可以更加专注于业务逻辑的实现，而无需手动处理DOM更新和数据同步的繁琐工作。
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue双向数据绑定示例</title>
<!-- 引入Vue 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<!-- 使用v-model实现双向数据绑定 -->
<input type="text" v-model="message" placeholder="请输入消息">
<p>输入的消息是：{{ message }}</p>
</div>
<!-- Vue应用初始化 -->
<script>
const { createApp } = Vue;
createApp({
data() {
return {
// 定义数据属性
message: ''
}
}
}).mount('#app'); // 挂载到#app元素
</script>
</body>
</html>
运行结果
Vue绑定文本和HTML
绑定文本：v-text;
绑定HTML:v-html;
以绑定HTML为例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 绑定文本和HTML案例</title>
<!-- 引入Vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<!-- 使用插值表达式绑定纯文本 -->
<p>消息内容: {{ message }}</p>
<!-- 使用v-html绑定HTML内容，注意这里的内容应该是可信的，以避免XSS攻击 -->
<div v-html="htmlContent"></div>
</div>
<script>
// 创建Vue应用
const { createApp } = Vue;
createApp({
data() {
return {
// 纯文本消息
message: 'Hello, Vue!',
// HTML内容，这里仅为示例，实际使用时请确保内容安全
htmlContent: '<strong>这是加粗的文字</strong> 和 <a href="https://vuejs.org" target="_blank">Vue.js官网</a>的链接。'
}
}
}).mount('#app'); // 挂载到#app元素
</script>
</body>
</html>
运行结果
点击链接即可进入官网。
Vue绑定class和style
在Vue中绑定class和style是一种强大的功能，它允许你根据组件的状态动态地改变元素的外观。通过使用数组和对象语法，你可以灵活地构建复杂的样式逻辑，并保持代码的可维护性和响应性。
运行案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Class and Style Binding</title>
<!-- 引入Vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<!-- 使用v-bind或简写`:`绑定class -->
<p :class="{ active: isActive, 'text-danger': hasError }">
Vue 3 Class Binding Example
</p>
<!-- 使用v-bind或简写`:`绑定style -->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
Vue 3 Style Binding Example
</div>
</div>
<script>
// Vue 3 使用createApp函数来创建Vue应用
const { createApp } = Vue;
createApp({
data() {
return {
isActive: true,
hasError: false,
activeColor: 'blue',
fontSize: 20
}
}
}).mount('#app');
</script>
<!-- 可选的CSS样式 -->
<style>
.active {
font-weight: bold;
}
.text-danger {
color: red;
}
</style>
</body>
</html>
运行结果
条件渲染
ue条件渲染是一种基于Vue.js框架的特性，它允许开发者根据特定的条件来决定是否渲染DOM元素或组件。这种机制使得Vue应用能够根据应用的状态或用户的行为动态地展示或隐藏内容，从而实现更加灵活和交互性强的用户界面。以下是对Vue条件渲染的详细简介：
Vue提供了几个指令来实现条件渲染，主要包括：
- v-if：根据表达式的真假值来条件性地渲染元素。如果表达式为true，则渲染该元素及其内容；如果为false，则不渲染该元素，并且不会占用DOM中的空间。v-if是真正的条件渲染，因为它会确保在条件为假时，元素及其子元素不会被创建或销毁。
- v-else：必须紧跟在v-if或v-else-if元素之后，并且不需要表达式。当v-if或v-else-if的条件不满足时，v-else元素会被渲染。
- v-else-if：用于在v-if之后添加额外的条件判断。可以连续使用多个v-else-if来提供多个条件分支。
- v-show：根据表达式的真假值来切换元素的CSS display属性。与v-if不同的是，v-show的元素始终会被渲染到DOM中，只是简单地通过改变CSS的display属性来控制其显示或隐藏。这意味着v-show的元素会占用DOM空间，但切换显示和隐藏的开销较小。
运行结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 条件渲染示例</title>
<!-- 引入Vue 3的CDN -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<!-- 使用v-if进行条件渲染 -->
<p v-if="isVisible">这段文字会在isVisible为true时显示。</p>
<!-- 使用v-else-if和v-else添加更多条件 -->
<p v-else-if="isAnotherCondition">这是另一个条件。</p>
<p v-else>默认情况。</p>
<!-- 添加按钮用于切换isVisible的值 -->
<button @click="toggleVisibility">切换显示</button>
</div>
<!-- Vue应用的JavaScript部分 -->
<script>
// 创建Vue 3应用
const { createApp } = Vue;
createApp({
data() {
return {
isVisible: true, // 控制显示隐藏的条件
isAnotherCondition: false // 可以根据需要添加更多条件
};
},
methods: {
toggleVisibility() {
// 切换isVisible的值
this.isVisible = !this.isVisible;
}
}
}).mount('#app'); // 将Vue应用挂载到id为app的DOM元素上
</script>
</body>
</html>
运行结果
计算属性
Vue的计算属性（Computed Properties）是Vue组件中一个非常强大的特性，它们基于它们的响应式依赖进行缓存。只有当相关依赖发生改变时，计算属性才会重新求值。这意呀着只要依赖没有发生变化，多次访问计算属性会立即返回之前的计算结果，而不必再次执行计算逻辑。
运行案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 计算属性示例</title>
<!-- 引入Vue 3的CDN链接 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<!-- 使用插值表达式显示计算属性的结果 -->
<p>原始值: {{ message }}</p>
<p>计算后的值: {{ reversedMessage }}</p>
</div>
<script>
// 使用Vue 3的createApp函数来创建Vue应用
const { createApp } = Vue;
// 定义Vue应用的根组件
const App = {
data() {
return {
// 定义响应式数据
message: 'Hello, Vue 3!'
}
},
computed: {
// 定义计算属性
reversedMessage() {
// 返回message的翻转字符串
return this.message.split('').reverse().join('');
}
}
};
// 创建Vue应用实例，并挂载到#app元素上
createApp(App).mount('#app');
</script>
</body>
</html>
运行结果
监视属性
Vue的监视属性使用watch选项来定义，它接受一个对象作为参数，该对象的键是需要被观察的数据属性名，值是一个包含回调函数或选项对象的配置。当被观察的数据属性发生变化时，watch中定义的回调函数会被自动调用。
运行案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 Watch 属性示例</title>
<!-- 引入Vue 3的CDN链接 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>当前计数: {{ count }}</p>
<button @click="increment">增加</button>
</div>
<script>
// 使用Vue 3的createApp函数来创建Vue应用
const { createApp, reactive, watch } = Vue;
// 定义一个响应式对象
const state = reactive({
count: 0
});
// 定义方法
function increment() {
state.count++;
}
// 创建Vue应用实例之前，设置watch
watch(() => state.count, (newValue, oldValue) => {
console.log(`count从${oldValue}变化到了${newValue}`);
// 这里可以执行一些基于count变化的操作
});
// 创建Vue应用实例
const App = {
setup() {
// 返回给模板的响应式数据和方法
return {
...state, // 解构state中的所有属性，使其成为组件的响应式状态
increment
};
}
};
// 创建Vue应用实例，并挂载到#app元素上
createApp(App).mount('#app');
</script>
</body>
</html>
运行结果
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
