标签：教程 Vue name app 绑定 number 实例 属性
示例1：如何使用Vue的数据绑定、指令（如v-text和v-html）以及如何通过v-pre指令来跳过元素的编译过程。此外，它还演示了如何在Vue组件中定义和使用数据对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- 设置文档的字符编码为UTF-8 -->
<title></title> <!-- 标题标签，当前未设置标题内容 -->
</head>
<!-- 引入Vue 3的global版本，用于在浏览器中直接通过<script>标签使用Vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<body>
<!-- Vue应用的挂载点，Vue实例将控制这个DOM元素及其内部的内容 -->
<div id="app">
<!-- 使用双花括号语法绑定name变量的值到h1标签的内容中 -->
<h1>{{name}}</h1>
<!-- 绑定stu对象的name属性的值到h1标签的内容中 -->
<h1>{{stu.name}}</h1>
<!-- 绑定stu对象的age属性的值到h1标签的内容中 -->
<h1>{{stu.age}}</h1>
<!-- v-text指令与双花括号语法功能相同，但v-text指令会替换元素的整个内容 -->
<h1 v-text="stu.age" ></h1>
<!-- 尝试使用v-text指令绑定stu.desc，但desc包含HTML标签，因此这里v-text会将其转义为纯文本 -->
<h1 v-text="stu.desc" ></h1>
<!-- v-html指令会输出原始的HTML内容，不会进行转义，因此可以正确渲染stu.desc中的<i>标签 -->
<h1 v-html="stu.desc" ></h1>
<!-- 双花括号语法，正常显示绑定的变量内容 -->
<h1>显示两个花括号和name：{{name}}</h1>
<!-- v-pre指令会跳过元素的编译过程，因此{{name}}会被原样显示，不会被替换为变量的值 -->
<h1 v-pre>显示两个花括号和name：{{name}}</h1>
</div>
<script>
// 创建一个Vue应用实例
var app = Vue.createApp({
// 定义应用的数据对象
data(){
return{
name :"python", // 一个简单的字符串变量
stu:{ // 一个对象，包含学生的信息
name:"张三", // 学生姓名
age:20, // 学生年龄
desc:"<i>是一名python爱好者</i>" // 学生描述，包含HTML标签
}
}
},
methods:{
// 方法对象，当前为空，可以定义一些供模板使用的方法
}
})
// 将Vue应用挂载到#app元素上，Vue将开始编译并控制这个元素及其内部的内容
app.mount('#app')
</script>
</body>
</html>
示例2：如何在Vue模板中使用v-bind指令（包括其简写形式:）来绑定HTML元素的属性（在这个例子中是a标签的href属性）到Vue实例的数据对象上。同时，它也展示了如何在模板中通过双花括号{{ }}语法来显示数据对象中的属性值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- 设置文档的字符编码为UTF-8，确保正确显示各种字符 -->
<title></title> <!-- 页面标题标签，当前未设置具体标题 -->
</head>
<!-- 引入Vue 3的global版本，允许在浏览器中直接使用Vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<body>
<!-- Vue应用的挂载点，Vue实例将控制这个DOM元素及其内部的内容 -->
<div id="app">
<!-- 使用v-bind指令绑定href属性到url1对象的url属性上，同时显示url1对象的name属性 -->
<a v-bind:href="url1.url">{{url1.name}}</a>
<!-- 一个空的div元素，当前没有实际用途 -->
<div></div>
<!-- 简写形式的v-bind指令，直接绑定href属性到url1对象的url属性上，同时显示url1对象的name属性 -->
<a :href="url1.url">{{url1.name}}</a>
</div>
<script>
// 创建一个Vue应用实例
var app = Vue.createApp({
// 定义应用的数据对象
data(){
return{
// 定义一个对象url1，包含name和url两个属性
url1:{
name:"百度", // 链接的文本内容
// 注意：这里的URL可能是一个示例，实际指向的是Vue.js官方文档的某个页面
url:"https://cn.vuejs.org/guide/essentials/template-syntax.html"
}
}
},
// 方法对象，当前为空，可以定义一些供模板使用的方法
methods:{
}
})
// 将Vue应用挂载到#app元素上，Vue将开始编译并控制这个元素及其内部的内容
app.mount('#app')
</script>
</body>
</html>
Vue模板中使用v-on:click指令（或其简写形式@click）来绑定按钮的点击事件到Vue实例的方法上。同时，它也展示了如何在Vue实例的数据对象中定义和修改数据属性，并在模板中通过双花括号{{ }}语法来显示这些数据属性的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- 设置文档的字符编码为UTF-8，以正确显示各种字符 -->
<title></title> <!-- 页面标题标签，当前未设置具体标题 -->
</head>
<!-- 引入Vue 3的global版本，允许在浏览器中直接使用Vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<body>
<!-- Vue应用的挂载点，Vue实例将控制这个DOM元素及其内部的内容 -->
<div id="app">
<!-- 一个按钮，当点击时，会触发Vue实例中的add方法，使number值增加 -->
<button type="button" v-on:click="add">+</button>
<!-- 显示Vue实例中number数据的值 -->
<h1>{{number}}</h1>
<!-- 另一个按钮，当点击时，会触发Vue实例中的sub方法，使number值减少 -->
<button type="button" @click="sub">-</button>
</div>
<script>
// 创建一个Vue应用实例
var app = Vue.createApp({
// 定义应用的数据对象
data(){
return{
// 定义一个名为number的数据属性，初始值为0
number:0
}
},
// 定义应用的方法对象
methods:{
// add方法，用于增加number的值
add(){
this.number++ // 使用this关键字访问Vue实例中的number属性，并将其值增加1
},
// sub方法，用于减少number的值
sub(){
this.number-- // 使用this关键字访问Vue实例中的number属性，并将其值减少1
}
}
})
// 将Vue应用挂载到#app元素上，Vue将开始编译并控制这个元素及其内部的内容
app.mount('#app')
</script>
</body>
</html>
标签：教程,
Vue,
name,
app,
绑定,
number,
实例,
属性
From： https://www.cnblogs.com/gxj521test/p/18573150