vue复习(一)
一、认识Vue
定义：一个构建数据驱动的Web界面的渐进式框架
优点：
1、可以完全通过客户端浏览器渲染页面，服务器端只提供数据
2、方面构建单页面应用程序(SPA)
二、引入Vue
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>vue导入</title> </head>
<body>
<div id="app">
<p title="普通p">p标签</p>
<!-- v-bind vue的指令，可以被vue解析并处理 -->
<!-- 第一个title：html标签的属性名(系统预定义的) -->
<!-- 第二个titile：vue的变量 -->
<p v-bind:title='title'>p标签</p>
</div>
</body>
<!-- 引入外部vue js -->
<script type="text/javascript" src="./js/vue.js"></script>
<!-- 自身 js -->
<script type="text/javascript">
// 创建vue实例，需要一个对象参数
new Vue({
el: '#app',
data: {
title: 'vue p'
}
})
</script>
</html>
三、Vue实例
实例：el
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue实例之el</title>
</head>
<body>
<div id="root"></div>
<!-- <p v-bind:class="title" v-on:dblclick='action' v-model='abc' v-for="it in its"></p> -->
<p v-bind:title='title'>p标签</p>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// el: vue实例的挂载目标
// 表示vue创建的该实例只对挂载点内部的模块进行处理
new Vue({
el: '#root',
data: {
title: 'vue p'
}
})
</script>
</html>
数据：data
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue data</title>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<!-- 出现在模块中的变量，一般都需要默认初始值 -->
<p v-text='txt'></p>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
// data为模块中的变量提供数据
data: {
msg: 'vue 控制的 文本1',
txt: 'vue 控制的 文本2',
}
});
console.log(app)
// el | data 为 vue变量 => 以$开头，区别普通变量
console.log(app.$data)
console.log(app.$data.msg)
// 所有在模块中产生的变量，也可以通过vue的实例直接访问
console.log(app.msg) </script>
</html>
方法：methods
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue data</title>
<style type="text/css">
.p1 {
width: 300px;
height: 100px;
border: 1px solid #333;
}
</style>
</head>
<body>
<div id="app">
<!-- v-on指令用于绑定事件 -->
<!-- 事件对应逻辑由vue实例的methods处理 -->
<!-- 绑定的事件(函数)需不需要携带参数列表： 无=>无需传参 有=>需要传参 -->
<!-- 需要操作事件(需要事件对象)无需传参，传参后会都是事件 -->
<p class="p1" v-on:click='func'>{{ msg }}</p>
<p class="p1" v-on:click='fn("zero", 88888)'>{{ msg }}</p>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
msg: 'vue context'
},
methods: {
func: function (obj) {
// alert('呵呵')
// this: vue实例 => app
// alert(this.msg)
console.log(obj)
},
fn: function (name, salary) {
console.log(name)
console.log(salary)
}
}
});
</script>
</html>
计算属性：computed
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>computed</title>
</head>
<body>
<div id="app">
<div>
姓：<input type="text" v-model='first_name' />
</div>
<div>
名：<input type="text" v-model='last_name' />
</div>
<!-- <p>姓名：{{ full_name() }}</p> -->
<!-- 采用计算方式的变量可以不在data中赋初值 -->
<p>姓名：{{ full_name }}</p>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
first_name: '',
last_name: ''
},
// methods: {
// full_name: function () {
// return this.first_name + " " + this.last_name;
// }
// },
// 一个变量依赖于多个变量，一般对该变量采用计算处理
computed: {
full_name: function () {
return this.first_name + " " + this.last_name;
}
}
})
</script> </html>
监听器：watch
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>computed</title>
</head>
<body>
<div id="app">
<div>
姓名：<input type="text" v-model='full_name' placeholder="姓与名以空格隔开" />
</div>
<p>姓：{{ first_name }}</p>
<p>名：{{ last_name }}</p>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
full_name: '',
first_name: '',
last_name: ''
},
watch: {
full_name: function () {
// 监听full_name，然后拆分为姓与名
var fname = this.full_name;
var arr = fname.split(' ');
this.first_name = arr[0];
this.last_name = arr[1];
}
}
})
</script> </html>
分隔符：delimiters
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>delimiters</title>
</head>
<body>
<div id="app">
{{ msg }} [[ msg ]] ${ msg }
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
msg: '数据'
},
// delimiters配置自定义绑定符号
// 值为拥有两个元素的数组，元素为字符串形式
delimiters: ['${', '}']
})
</script> </html>
实例对象使用成员属性和方法
<script>
var app = new Vue({
el: '#app',
data: {
msg: 'message'
}
})
console.log(app)
console.log(app.$el)
console.log(app.$data.msg)
console.log(app.msg)
</script>
四、实例生命周期钩子
定义：
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
钩子方法：
beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。 mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。 updated：数据更新时调用，发生在虚拟 DOM 打补丁之前。 activated：keep-alive 组件激活时调用。 deactivated：keep-alive 组件停用时调用。 beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。 destroyed：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 errorCaptured：2.5.0+ 新增，当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
重点钩子：
created：实例完全创建完毕(属性与方法都准备就绪)。可以进行数据操作(请求后台数据，重新渲染最新数据) mounted：虚拟DOM构建完毕，并完成实例的el挂载。可以重新操作页面DOM
钩子函数实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生命周期钩子</title>
</head>
<body>
<div id="app">
{{ msg }}
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
msg: '数据'
},
// 该钩子方法触发：vue实例刚被创建(只拥有内存位置),其他任何操作都未执行
// 就满足的beforeCreate钩子的触发条件，系统就会回调该方法的实现
// 用户在该触发条件情况下想去完成某些逻辑，那么就去实现该钩子
beforeCreate: function () { },
/*
// 系统内部调用
if (beforeCreate) {
beforeCreate()
}
// ...
// ...
if (created) {
created()
}
if (beforeMount) {
beforeMount()
}
// ...
*/ // 数据与事件加载完毕，el并没有进行挂载
created: function () {
// 获取想要的数据(请求后台)
// 事件的解绑或换绑或重新绑定
// 对虚拟DOM进行修改
},
// DOM树加载完毕，el渲染完毕
mounted:function () {
// 可能需要对DOM进行操作(交给模块处理)
}
})
</script> </html>
五、视图常规操作
v-text：文本变量
<p v-text='msg'></p>
<p>{{ msg }}</p>
v-once：一次性文本赋值
<p v-once>{{ msg }}</p>
v-html：html文本变量
<p v-html='msg'></p>
<script>
new Vue({
el: '#app',
data: {
msg: '<b>文本</b>'
}
})
</script>
v-bind：属性绑定
<div id="app">
<img v-bind:src='imgSrc' />
<!-- 简写 -->
<img :src='imgSrc' />
</div>
<script>
new Vue({
el: '#app',
data: {
imgSrc: 'https://www.baidu.com/favicon.ico'
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主要指令v-bind</title>
<script type="text/javascript" src="js/vue.js"></script>
<style type="text/css">
.a {
background-color: red;
}
.b {
color: green;
}
</style>
</head>
<body>
<div id="app">
<!-- v-bind:绑定系统预定义属性 -->
<!-- 字符串abc -->
<p title="abc">p段落</p>
<!-- 1、变量abc，需要初始化 -->
<p v-bind:title="abc">p段落</p>
<!-- 2、如何直接将abc作为字符串绑定到属性 -->
<p v-bind:title="'abc'">p段落</p>
<!-- 3、v-bind简写为: -->
<p :title="'ABC'">p段落</p> <!-- 4、绑定多个变量 --> <!-- i：以数组形式进行赋值 -->
<!-- a, b为两个变量 -->
<!-- 变量值可以有data提供 -->
<!-- <div :class="[a, b]">12345</div> --> <!-- ii：以对象形式进行赋值 -->
<!-- a，b为两个class值 -->
<!-- class值只取true | false -->
<!-- 非空均视为true，否则视为false -->
<!-- <div :class="{a: 'A', b: 'B'}">67890</div> -->
<!-- <div :class="{a: true, b: true}">67890</div> --> <!-- iii -->
<div :class="[{a: true}, {b: true}]">呵呵嘻嘻哈哈</div> <!-- 总结 -->
<!-- [], 中出现的值，作为变量，变量值来源于data，且最终将来源于data的数据作为属性值赋值给v-bind绑定的属性 -->
<!-- {}, 中出现的键(key)，直接作为v-bind绑定的属性的值，而键(key)对应的值(value)是决定键是否起效，值(value)的取值只为true|false --> <a :style="color" href="">百度</a>
<a :style="{color: 'red', backgroundColor: 'black'}" href="">京东</a>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
abc: 'ABC',
a: 'a',
b: 'b',
// color: 'color: red'
color: {
color: 'red',
// 支持驼峰命名法
backgroundColor: 'orange'
}
}
})
</script>
</html>
v-model：双向数据绑定
<div id="app">
<input type="text" v-model='msg'>
<p>{{ msg }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: ''
}
})
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主要指令v-model</title>
<script type="text/javascript" src="js/vue.js"></script>
<style type="text/css"> </style>
</head>
<body>
<div id="app">
<!-- v-model针对于表单元素 --> <form action="" method="get">
<!-- 1、双向绑定：服务于文本输入框 -->
<!-- v-model存储的值为输入框的value值 -->
<div>
<input type="text" name="usr" v-model="in_val">
<input type="password" name="ps" v-model="in_val" >
<textarea name="info" v-model="in_val"></textarea>
</div> <!-- 2、单选框 -->
<div>
<!-- 单选框是以name进行分组，同组中只能发生单选 -->
<!-- v-model存储的值为单选框的value值 -->
男：<input type="radio" name="sex" value="男" v-model="ra_val">
女：<input type="radio" name="sex" value="女" v-model="ra_val">
{{ ra_val }}
</div> <!-- 3、单一复选框 -->
<!-- v-model存储的值为true|false -->
<!-- 或者为自定义替换的值 -->
<div>
<input type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" />
{{ sin_val }}
</div> <!-- 4、多复选框 -->
<!-- v-model存储的值为存储值多复选框value的数组 -->
<div>
<input type="checkbox" value="喜好男的" name="cless" v-model='more_val' />
<input type="checkbox" value="喜好女的" name="cless" v-model='more_val' />
<input type="checkbox" value="不挑" name="cless" v-model='more_val' />
{{ more_val }}
</div> <input type="submit">
</form> </div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
in_val: '',
// 默认值可以决定单选框默认选项
ra_val: '男',
// 默认值为true，单一复选框为选中，反之false为不选中
sin_val: '',
// 数组中存在的值对应的复选框默认为选中状态
more_val: ['喜好女的','不挑']
}
})
</script>
</html>
v-on:事件绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主要指令v-on</title>
<script type="text/javascript" src="js/vue.js"></script>
<style type="text/css"> </style>
</head>
<body>
<div id="app">
<!-- 1、绑定系统预定义事件，事件值为函数 -->
<div v-on:click="fn1">{{ msg }}</div>
<!-- 2、v-on简写 -->
<div @click="fn2">{{ msg }}</div>
<!-- 3、传值 -- 默认传值 -- 事件 event -->
<div @click='fn3'>{{ msg }}</div>
<!-- 4、传值 -- 自定义值 -->
<div @click="fn4(msg, 88888)">{{ msg }}</div>
<!-- 5、传参 -- 自定义值 + 事件 -->
<div @click="fn5($event, msg)">{{ msg }}</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: '默认值'
},
methods: {
fn1: function () {
alert('呵呵')
},
fn2 () {
alert('嘻嘻')
},
fn3 (obj) {
console.log(obj)
},
fn4 (obj, num) {
console.log(obj, num)
console.log(this.msg)
},
fn5 (ev, msg) {
console.log(ev, msg)
}
}
})
</script>
</html>
v-cloak：避免页面加载闪烁
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app" v-cloak> </div>
视图自身运算
<div id="app" v-cloak>
<p>{{ 1 + 1 }}</p>
<p>{{ [1, 2, 3].join('@') }}</p>
</div>
视图相关操作实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视图</title>
<style type="text/css">
p {
border: 1px solid #ff6700;
height: 30px;
line-height: 30px;
}
.abc {
border-color: yellowgreen;
}
[class] {
border-width: 5px;
} [v-cloak] {
display: none;
}
</style>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<!-- <div id="app" v-cloak> -->
<div id="app">
<!-- v-model实现数据的双向绑定 -->
<input type="text" v-model='msg'>
<input type="text" v-model='msg'>
<p>{{ msg }}</p>
<p v-text='msg'></p>
<!-- 只赋值一次 -->
<p v-once>{{ msg }}</p>
<!-- 可以解析html语法的标签 -->
<p v-html='msg'></p> <!-- 属性的绑定：属性值有变量控制 v-bind:属性名 :属性名 -->
<!-- <p class="active"></p> -->
<!-- <p v-bind:class='active'></p> -->
<p :class='active'></p> <!-- 事件的绑定：事件值为函数名(带或不带参数列表) v-on:事件名 @事件名 -->
<p @dblclick='func'></p> </div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
msg: '初值',
active: 'abc'
},
methods: {
func: function () {
alert('呵呵')
}
}
})
</script>
</html>
六、条件渲染
v-if：值true会被渲染，值false不会被渲染
<div id="app">
<div v-if='isShow'>div div div</div>
<button @click='isShow = !isShow'>改变</button>
</div>
<script>
new Vue({
el: '#app',
data: {
isShow: true
}
})
</script>
v-else：与v-if结合使用形成对立面
<div id="app">
<div v-if='isShow'>div div div</div>
<div v-else='isShow'>DIV DIV DIV</div>
<button @click='isShow = !isShow'>改变</button>
</div>
<script>
new Vue({
el: '#app',
data: {
isShow: true
}
})
</script>
v-else-if：变量的多情况值判断
<div id="app">
<div v-if='tag == 0'>if if if</div>
<div v-else-if='tag == 1'>else if else</div>
<div v-else='tag == 2'>else else else</div>
<input type='number' min='0' max='2' v-model='tag' />
</div>
<script>
new Vue({
el: '#app',
data: {
tag: 0
}
})
</script>
template：不被渲染的vue结构标签
<template v-if="isShow">
<p>用template嵌套</p>
<p>可以为多行文本</p>
<p>同时显隐</p>
<p>且template标签不会被vue渲染到页面</p>
</template>
v-show：一定会被渲染到页面，以display属性控制显隐
key：为v-if方式的显隐创建缓存，提高效率
<div id="app">
<div v-if='tag == 0' key='0'>if if if</div>
<div v-else-if='tag == 1' key='1'>else if else</div>
<div v-else='tag == 2' key='2'>else else else</div>
<input type='number' min='0' max='2' v-model='tag' />
</div>
<script>
new Vue({
el: '#app',
data: {
tag: 0
}
})
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
<script type="text/javascript" src="js/vue.js"></script>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: red;
border-radius: 50%;
}
.bb {
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 50%;
font: 400 20px/50px 'STSong';
text-align: center;
user-select: none;
float: left;
margin-left: 20px;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.a {
width: 300px;
height: 200px;
}
.r {background: red}
.g {background: green}
.b {background: blue}
</style>
</head>
<body>
<div id="app">
<button @click="btnClick">切换</button>
<!-- 1、v-if取值为true|false -->
<!-- true将会被渲染|false不会被渲染(页面中不存在该标签) -->
<!-- <div class="box" v-if="isShow"></div> --> <!-- 2、v-show取值为true|false -->
<!-- true为渲染并显示，false虽然渲染到DOM上，但display以none形式存在 -->
<div class="box" v-show='false'></div> <!-- 3、v-if、v-else-if、v-else -->
<!-- 多分支条件 -->
<div class="wrap">
<!-- .bb.b$*3 -->
<div class="bb b1" @click='changeColor(0)'>红</div>
<div class="bb b2" @click='changeColor(1)'>绿</div>
<div class="bb b3" @click='changeColor(2)'>蓝</div>
</div>
<div>
<!-- 多分支一定存在判断，判断便会产生比较变量 -->
<div class="r a" v-if='tag == 0'></div>
<div class="g a" v-else-if='tag == 1'></div>
<div class="b a" v-else></div>
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
isShow: false,
tag: 0
},
methods: {
// 通过方法控制绑定给v-if的值
btnClick: function () {
this.isShow = !this.isShow;
},
changeColor (num) {
this.tag = num;
}
}
})
</script>
</html>
七、列表渲染
v-for：循环渲染列表
<div id="app">
<ul>
<li v-for='item in items'>{{ item }}</li>
</ul>
<button @click='click'>改变</button>
</div>
<script>
new Vue({
el: '#app',
data: {
items: ['张三', '李四', '王五']
}，
methods: {
click: function () {
this.items.splice(1, 1, '李大大');
this.items.pop();
this.items.push('赵六')
}
}
})
</script>
遍历数组
// items: ['张三', '李四', '王五'] // 值
<ul>
<li v-for='item in items'>{{ item }}</li>
</ul>
// 值, 索引
<ul>
<li v-for='(item, index) in items'>{{ index }} - {{ item }}</li>
</ul>
遍历对象
// {'name': '张三', 'age': 18, 'sex': '男'}
// 值
<div v-for="value in object">
{{ value }}
</div>
// 值, 键
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
// 值, 键, 索引
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li>{{list[0]}}</li>
<li>{{list[1]}}</li>
<li>{{list[2]}}</li>
<li>{{list[3]}}</li>
<li>{{list[4]}}</li>
<li>{{list[5]}}</li>
<li>{{list[6]}}</li>
</ul>
<!-- 迭代数组 -->
<ul>
<!-- 变量it为集合list中被迭代出的元素 -->
<!-- 由v-for指令控制的标签会随元素的个数动态渲染 -->
<li v-for='it in list'>{{ it }}</li>
</ul> <!-- 迭代对象 -->
<div v-for='value in dic'>{{ value }}</div> <!-- 迭代除取值外的其他可迭代到的值 -->
<ul>
<li v-for="(v, i) in list">索引：{{i}} 名字：{{v}}</li>
</ul> <ul>
<li v-for="(v, k, i) in dic">{{i}} {{k}} {{v}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
list: ["张三", "李四", "王五", "赵六", "钱七", "egon", "monkey"],
dic: {'name': 'zero', 'age': 8, 'salary': 88888}
}
})
</script>
</html>
复杂数据渲染
// items: [{'name': '张三'}, {'age': 18}, {'sex': '男'}]
<div>
<div>{{ items[0].name }}</div>
<div>{{ items[1].age }}</div>
<div>{{ items[2].sex }}</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<!-- key属性：可以提高效率（通过不同的唯一key值建立缓存） -->
<div id="app">
<div v-for='(item,index) in list' :key='index' style="height: 30px">
<div v-for='(value, key, index) in item' :key='index + 10' style="float: left;">
{{key}} : {{value}}
</div>
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
list: [
{'name': 'egon', 'age': 108},
{'name': 'monkey', 'age': 77},
{'name': 'zero', 'age': 8}
]
}
})
// items: [{'name': '张三'}, {'age': 18}, {'sex': '男'}]
// 通过[索引]取出数组中对应的值
// 通过.key取出对象中对应的值
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>todoList</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<!-- 录入用户输入的数据，更新到指定的list中，通过vue的数据驱动特效，实时渲染到页面 -->
<div id="app">
<div>
<input type="text" v-model='value'>
<!-- 提交：将数据添加到list中 -->
<button @click='pushAction'>提交</button>
</div>
<ul>
<!-- 点击指定的li，将自身数据从list中移除，完成自身删除 -->
<li @click='deleteAction(index)' v-for='(item,index) in list' :key="index">{{ item }}</li>
</ul> </div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
// vue目前不支持索引直接操作数据，但可以通过数据类型对应的操作方法
data: {
value: '',
list: []
},
methods: {
pushAction () {
this.list.push(this.value);
this.value = ''
},
deleteAction (index) {
// alert(index)
this.list.splice(index, 1)
}
}
})
</script>
</html>
todoList
vue复习(一)的更多相关文章
- vue复习
vue 复习 options的根属性 el:目的地(srting || DOM元素) template 模板 data 是一个函数 , return一个对象 对象中的key, 可以直接在页面中 ...
- vue复习(二)
一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点 每个组件模板只能拥有一个根标签 子组件的数据具有作用域,以达到组件的复用 二.局部组件 & ...
- vue 复习（2）v-bind的应用 v-bind:classv-binf:style
dasdclass与style绑定v-bind 1. 绑定HTML Class 对象语法 有些时候我们想动态的切换class的类名.在原生的js或jq中我们就要通过事件来动态的改变class类名,但在 ...
- vue 复习篇. 注册全局组件,和 组件库
初篇 ============================================================== 1. 编写loading组件(components/Loading/ ...
- [vue]vue基础复习项案例stepbystep
看本篇第二次复习内容即可. 还有一些 文档了这个如 https://www.cnblogs.com/iiiiiher/p/9508733.html https://www.cnblogs.com/ii ...
- 温故vue对vue计算属性computed的分析
vue 复习笔记(1)一段时间没有看过vue的官方文档了,温故而知新,所以我决定将vue的文档在看一遍 1计算属性computed在vue的computed中声明的是计算属性,可以使用箭头函数来进行定 ...
- vue项目创建与使用
目录 复习 Vue项目环境搭建 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 vue组件(.vue文件) 全局脚本文件main.js(项目入口) 改写 vue项目启动生命 ...
- 复习Vue
以前学过vue,但是工作中一直没有用到都忘记了最近在复习下正好做个笔记偶尔看看,(目前常更新,2018年6月25日) 1.指令 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. ...
- Vue 知识复习(上)
Vue Vue实例 创建实例: var vm = new Vue({ //code }) 数据与方法: 只有当实例被创建时 data 中存在的属性才是响应式的; Vm.b = 'h1' 是不会触发视图 ...
随机推荐
- [UI] 精美UI界面欣赏[9]
精美UI界面欣赏[9]
- MagicalRecord使用中的注意事项
MagicalRecord使用中的注意事项 使用CoreData [1] 使用CoreData [2] 使用CoreData [3] 使用CoreData [4] 使用MagicalRecord操作C ...
- Fiddler下Firefox提示“您的连接并不安全”的解决办法
一.版本信息 Firefox 最新版本V46.0.1 Fiddler 最新版本V4.6.2.3 二.错误信息 开启fiddlers的https协议捕获的方法,百度上可以查到不再赘述,直接放张图(Too ...
- Mina使用总结(四)传输对象ObjectSerializationCodecFactory
用mina框架传输对象,对于开发者来说,直接传输对象,而不用自己编写相应的报文转换代码,将大大节省 开发时间. 即使用对象编码解码器 使用ObjectSerializationCodecFactory ...
- idea html热部署
IDEA SpringBoot 热部署+html修改无需make自动刷新 收藏 HeyS1 发表于 3个月前 阅读 310 收藏 2 点赞 0 评论 0 特邀IBM大咖的主题沙龙,5月20日·北京·3 ...
- IOS和安卓WEB页面，input输入框被软键盘遮挡解决方法
本来以为这问题就只有ios才有,身边也没有android机测试,网上一搜,貌似有这个问题的还不少.最后把各种解决方法试了一边,貌似没什么用. 最后是这样解决的: setInterval(functio ...
- transfer function
线性变化后,往往希望进行非线性变化,常用的非线性变化函数有Sigmoid,Tanh,ReLU.会发现,经过这三个函数变化后,Tensor的维度并不发生变化. tanh(双曲正切函数):
- django restframework 简单总结
官方文档:http://www.django-rest-framework.org/ model.py class Snippet(models.Model): created = models.Da ...
- 根据经纬度获取位置描述：百度API与高德API的区别
百度API 使用百度坐标 1.访问方式一 http://api.map.baidu.com/geocoder/v2/?location=35.063592,118.38513&output=j ...
- Spring AOP源码分析（三）创建AOP代理
摘要: 本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. 目录 一.获取增强器 1. 普通增强器的获取 2. 增加同步实例化增强 ...