标签：el vue 绑定 基础知识 Vue message data
VUE
是一套用于构建用户界面的渐进式框架。vue被设计为可以自底向上逐层应用。
el:挂载点
设置完成之后，el内部，id内部的两个大括号 同名，就会被替换。
el是用来设置vue实例挂载（管理）的元素
vue会管理el选项命中的元素及其内部的后代元素
可以使用其他的选择器，但是建议使用id选择器
可以使用其他的双标签，但不能但标签，且HTML和body双标签不行。建议使用div标签，因为div标签没有上面样式。
data：数据对象
Vue中用到的数据定义在data中
data中可以写复杂类型数据时，遵守js的语法即可
MVVM模式的实现者
（Model-View-ViewModel）是一种软件架构设计模式。
model层：数据层
view层：视图层
viewmodel层：双向绑定层
vue.js就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定
第一个vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>石毅</h3>
<!--view层，变成了一个模板-->
<div id="app">
{{message}}
</div>
<!--导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({ //有了vue对象，通过元素去绑定，对象都是键值对的形式
el:"#app", //第一步绑定一个标签
//modet层：数据 这里也就是data
data:{
message:"hello vue!" //第二步：放一个数据
//第三步：把数据放上去拿，就是上面id下面那个位置
}
});
<!--步骤：1.导入vue-->
<!--2.new一个vue对象-->
<!--3.绑定一个元素，放数据-->
<!--4.从模板里面取出来-->
</script>
</body>
</html>
我们还有使用v-bind来绑定元素特性！
{{}}与v-bind:= 差不多 是v-text的简写
v-bind等被叫为指令。指令带有前缀v-，以表示他们是Vue提供的特殊特性。
判断-循环
if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1 v-if="message==='A'">A</h1>
<h1 v-else-if="message==='B'">B</h1>
<h1 v-else-if="message==='C'">C</h1>
<h1 v-else-if="message==='D'">D</h1>
<h1 v-else>E</h1>
<!--三个等号是全等于-->
</div>
<!--导入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message: 'A'
}
});
</script>
</body>
</html>
for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<li v-for="(item,index) in items"> //for 里面的下标，index
{{item.demo}}-----------{{index}}
</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app", //#绑定
data: {
items: [
{demo: 'java'},
{demo: '前端'},
{demo: '后端'}
]
}
});
</script>
</body>
</html>
事件
事件肯定有方法：因为点击按钮会产生一个事件，这个事件有一个函数(方法)，这个函数 会去做一些事情。
on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id ="app" >
<button v-on:click="sayHi">点击我</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "欢迎光临！"
},
methods: { //方法必须定义在Vue的Method对象中
sayHi: function () {
alert(this.message)
}
}
});
</script>
</body>
</html>
<button>点击我</button>
这是生成一个可以点击的按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 输入的文本：<input type="text" v-model="message"> {{message}}-->
<!-- 输入的文本：<textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
{{message}}>-->
<!-- 性别：
<input type="radio" name="sex" value="男" v-model="message">男
<input type="radio" name="sex" value="女" v-model="message">女
<p>选中了谁:{{message}}</p> -->
<!--input type="radio" 是单选框 checked是默认选中-->
下拉框：
<select v-model="message">
<option disabled="">---请选择---</option> <!--预留选项-->
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<!-- <span> {{message}} </span>-->
{{message}}
</div>
<!--<input>这是生成输入框，v-model是双向绑定，是上左跟下绑定，下跟上右绑定 起来-->
<!--v-model指令可以在表单<input>(框)、<textarea>(可确定大小的框)、<select>（下拉框）元素上面创建双向绑定 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "A"
}
})
</script>
</body>
</html>
标签：el,vue,绑定,基础知识,Vue,message,data 来源： https://www.cnblogs.com/shiyi1/p/16538879.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。