vue
框架:是一个半成品软件，是一套可重用的，通用的，软件基础代码模型。基于框架进行开发，更加快捷 ，更加高效
v-bind为HTML标签绑定属性值，如设置href，css样式等
v-model在表单元素上创建双向数据绑定
el:挂载点
data:数据对象
methods:方法对象
vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时，遵守js语法即可
v-text设置标签的文本值
在el命中标签内部及子类的属性中设置data中的值，即可在该标签内部 显示该属性ps:可以进行字符串的拼接
v-HTML设置文本的HTML
普通文本和v-text一样
html格式的文本会被解析成对应的标签
v-on
为元素绑定事件
eg：
v-on:click="dolt"
"v-on:"可以替换成@符
传递自定义参数，事件修饰符
v-show
操纵display元素
根据表达式的真假，切换元素的显示和隐藏
false隐藏
true显示
通常用一个变量表示该值，再用一个方法控制 该值，再将该方法绑定一个事件
v-if
根据表达式的真假，切换元素的显示状态
操纵dom树移除元素再添加回来
频繁切换用v-show因为操作dom消耗较大
v-bind
设置元素的属性eg:src，title，class
v-bind可以省略
直接 :属性名="属性值"
.active{
border:1px
}
:class="{active:isActice}"
v-for
根据数据生成列表结构
<li v-for="item in arr">黑马程序员{{item}}</li>
或
<li v-for="(值，索引) in arr">
v-model
获取和设置表单元素的值(双向数据绑定)
小便签条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>s</title>
<style>
#bigbox {
position: absolute;
height: auto;
width: 300px;
left: 500px;
top: 30%;
border: solid black 3px;
}
.an {
height: 100px;
border: solid black 3px;
list-style-type: none;
}
.an:hover {
border: solid red 3px;
}
</style>
</head>
<body>
<div id="bigbox">
<input type="text" v-model="inner" @keyup.enter="add">
<ul>
<li v-for="(item,index) in arr" v-text="(index+1)+item" class="an" @dblclick="subta(index)">
</li>
</ul>
<button @click="cleann">clean</button>
<p v-text="content"></p>
</div>
<script src="vue.js"></script>
<script>
var app = new new Vue({
el: "#bigbox",
data: {
arr: ["写代码", "吃饭饭", "睡觉觉"],
inner: "好好学习",
content: 3
},
methods: {
add: function () {
if (this.inner != "") {
this.arr.push(this.inner)
this.inner = ""
this.content++;
}
},
subta: function (index) {
this.arr.splice(index, 1)
this.content--;
},
cleann: function () {
this.arr.splice(0, this.arr.length)
this.content = 0
}
},
})
</script>
</body>
</html>