基础语法
v-text
使用 v-text 输出
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text</title>
</head>
<body>
<div id="app">
<!-- 使用插值输出 -->
<h1>{
{msg}}</h1>
<!-- 使用指令 v-text 输出 -->
<h1 v-text="msg"></h1>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
msg: "Hello Vue"
}
})
</script>
</body>
</html>
思考 插值语法输出 和 v-text输出 有什么区别 ？
{ {msg}} 插值语法是是需要等待 Vue 实例创建出来，才会进行值的插入（也即渲染页面），所以当 Vue 实例还没创建出来的时候 页面效果是展示{ {msg}}
v-text 指令语法也是需要等待 Vue 实例创建出来，指令才会生效，但若使用指令的标签中没有内容的话，那么页面是什么都不会显示的，当Vue实例创建完成，就会将值插入标签，进行页面渲染。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指令语法v-text与插值语法的区别</title>
<script src="vue.js"></script>
</head>
<body bgcolor="pink">
<div id="app">
<h1>{
{msg}}</h1>
<h2 v-text="msg"> 请稍等.... </h2>
</div>
<script>
setInterval(() => {
let app = new Vue({
el: "#app",
data: {
msg: "Hello Vue",
}
})
}, 4000)
</script>
</body>
</html>
效果图示
za
v-html
指令语法 v-html，可以解析html标签
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-html</title>
<script src="vue.js"></script>
</head>
<body bgcolor="pink">
<div id="app">
<div>{
{ richText }}</div>
<div v-text="richText"></div>
<div v-html="richText"></div>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
richText: '<div><h1>v-html</h1><p>可以解析我们吗？</p></div>'
}
})
</script>
</body>
</html>
效果图示
如何用呢
场景 1
文本展示：对于需要直接显示文本内容的场景，可以使用 v-text。例如，在一个产品列表中，每个产品都有一个描述字段，你可以使用 v-text 来展示该字段的内容。
<div v-for="product in productList">
<p v-text="product.description"></p>
</div>
场景 2
文本展示：对于需要直接显示文本内容的场景，可以使用 v-text。例如，在一个产品列表中，每个产品都有一个描述字段，你可以使用 v-text 来展示该字段的内容。
<div v-html="articleContent"></div>
场景 3
前端渲染模板：有时候你可能需要根据特定的条件动态生成一些 HTML 内容，这时可以使用 v-html 结合计算属性或方法来实现前端渲染。
<div v-html="renderTemplate"></div>
computed: {
renderTemplate() {
if (this.condition) {
return '<p>条件为真时的模板</p>';
} else {
return '<p>条件为假时的模板</p>';
}
}
}
通过计算属性 renderTemplate 返回一段 HTML 字符串，并使用 v-html 把它渲染到页面上。
需要注意的是，在使用 v-html 指令时，要确保数据是可信的，并避免使用用户输入的内容来显示或渲染 HTML。这是为了防止潜在的安全风险和 XSS 攻击。
当涉及复杂逻辑时可以与其它搭配使用
条件渲染：使用 v-if 或 v-show 指令根据条件来渲染特定的内容。
<div v-if="isUserLoggedIn">
<p>Welcome, {
{userName}}!</p>
</div>
<div v-else>
<p>Please log in to continue.</p>
</div>
列表渲染：使用 v-for 指令在列表数据上进行循环渲染。
<ul>
<li v-for="item in items" :key="item.id">{
{ item.name }}</li>
</ul>
表单处理：使用 v-model 指令双向绑定表单元素的值，并结合表单验证逻辑。
<input type="text" v-model="username" required>
<button @click="submitForm">Submit</button>
javascript
methods: {
submitForm() {
if (validFormData(this.username)) {
// 处理表单提交逻辑
}
}
}
事件处理：使用 v-on 或简写的 @ 指令来处理用户交互事件，并执行相应的逻辑。
<button @click="handleButtonClick">Click me</button>
javascript
methods: {
handleButtonClick() {
// 处理按钮点击逻辑
}
}
复杂的业务逻辑通常需要结合更多的 Vue 功能和特性，如计算属性、侦听器、自定义指令、组件等。根据具体的需求和场景，选择合适的功能和指令来实现复杂逻辑。
谢谢款待
