标签：Vue app 元素 mask 基础知识 指令 data
目录
Vue简介
1.JavaScript框架
2.简化Dom操作
3.响应式数据驱动
第一个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>第一个Vue程序</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
、
//过程：导入开发版本的Vue.js
// 创建Vue实例对象，设置el属性和data属性
// 使用简洁的模板语法把数据渲染到页面上
</script>
</body>
</html>vue官网：Vue.js
el：挂载点
Vue实例的作用范围是？
Vue会管理el选项命中的元素及其内部的后代元素。
是否可以使用其他的选择器？
可以使用其他的选择器，但是建议使用id选择器。
是否可以设置其他的dom元素？
可以使用其他的双标签，不能使用HTML和BODY。
Data数据对象
Vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时，遵守js的语法
v-text、v-html、v-on指令
内容绑定、事件绑定
v-text指令的作用是：设置标签的内容。
默认写法会替换全部内容，使用差值表达式{{}}可以替换值对内容，内部支持写表达式。
v-html指令的作用是：设置元素的innerHTML。
内容中有html结构会被解析为标签。
v-text指令无论内容是什么，只会解析为文本。
解析文本使用v-text，需解析html结构使用v-html
v-on指令的作用是：为元素绑定事件
<!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>
</head>
<body>
<!-- 2.html结构 -->
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt">
<input type="button" value="v-on简写" @click="doIt">
<input type="button" value="双击事件" @dblclick="doIt">
<h2 @click="changeFood">{{food}}</h2>
</div>
<!-- 1. 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
//3.创建vue实例
var app = new Vue({
el:"#app",
data:{
food:"红烧排骨"
},
methods:{
doIt:function() {
alert("go");
},
changeFood:function() {
this.food+="好好吃！"
}
}
})
//v-on指令的作用是：为元素绑定事件
//事件名不需要写on
//指令可以简写为@
//绑定的方法定义在methods属性中
</script>
</body>
</html>
点击<h2>标签内容显示
标签：Vue,app,元素,mask,基础知识,指令,data 来源： https://blog.csdn.net/xy_is_fhh/article/details/122622936
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。