vue入门及小项目小便签条
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>