<div id="root">
<div>
<input v-model="inputValue" />
<button @click="onAdd">submit</button>
</div> <ul>
<todo-item
v-for="(item, index) of list"
:key="index"
:content="item"
:index="index"
@delete="onDelete"
></todo-item>
</ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript"> Vue.component('todo-item', {
props: ['content', 'index'],
template: '<li>{{content}} <a href="javascript:;" @click="onClick">删除</a></li>',
methods: {
onClick: function(){
this.$emit('delete', this.index)
}
},
}); new Vue({
el:"#root",
data:{
inputValue: '',
list: [],
}, methods: {
onAdd: function(){
if(this.inputValue == '') return;
this.list.push(this.inputValue);
this.inputValue = '';
},
onDelete: function(index){
this.list.splice(index, 1);
},
}
}) /*
white-space: pre-line; var app = new Vue({ el: '#id', //属性注入
props: {
}, data: {
message: 'Hello Vue!'
}, //方法
methods: { }, //计算属性
//计算属性与方法的区别在于,它是基于它们的依赖进行缓存的,只在相关依赖发生改变时它们才会重新求值,性能更优。
computed: { fullName: { get: function () {
return this.firstName + ' ' + this.lastName
}, set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}, //侦听属性 watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
} }); Vue.component('demo-simple', {}); 绑定
v-bind:title=""
表单输入绑定
v-model="" 遍历
v-for="(item, key, index) of items"
v-for="(item, index) of items"
v-for="item of items" 绑定事件
v-on:click="" v-if=""
v-else-if=""
v-else
<template v-if=""></template> v-show="" vm.$data
vm.$el
$event vm.$watch('a', function(newVal, oldVal){}); 一次性
<span v-once>{{ msg }}</span> 以标准的 html 解析
v-html="html" .prevent 是修饰符,用于阻止浏览器默认行为
v-on:submit.prevent="onSubmit" <div class="static" v-bind:class="{ active: isActive, danger: hasError }"></div> */ </script>

vue 笔记的更多相关文章

  1. Vue笔记目录

    Vue笔记目录 一.Vue.js介绍 二.vue基础-vue-cli(vue脚手架) ...持续更新中,敬请期待

  2. 《Vue笔记01: 我与唐金州二三事》

    最近我在收看唐金州在极客时间发布的<vue从入门到精通>,颇有收获. 唐金州,一点资讯前端技术专家,曾在蚂蚁金服就职,也是开源组件库ant design vue的作者,虽然唐老师写的ant ...

  3. Vue笔记--通过自定义指令实现按钮操作权限

    经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...

  4. Vue笔记(有点乱)

    Vue学习笔记(2019.7.31) 目录 Vue学习笔记(2019.7.31) vue 基本指令用法 v-cloak v-text v-html v-bind v-on 跑马灯 v-on v-mod ...

  5. 一个后端开发的 Vue 笔记【入门级】

    一 前言 最近找了些教程,顺带着趴在官网上,看了看 Vue 的一些内容,入门的一些概念,以及基础语法,还有一些常用的操作,瞄了一眼,通篇文字+贴了部分代码 9000 多字,入门语法什么的还是很好理解的 ...

  6. vue笔记

    安装vue脚手架工具 sudo cnpm install -g vue-cli

  7. vue笔记 递归组件的使用

    递归组件 什么是递归组件? 组件自身去调用组件自身. 代码示例 DetailList.vue(子组件-递归组件) <template> <div> <div class= ...

  8. vue笔记-列表渲染

    用v-for把一个数组对应为一组元素 使用方法:v-for="(item,index) in items"//也可以使用of替代in { items:源数组 item:数组元素迭代 ...

  9. vue笔记-条件渲染

    条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...

  10. 【Vue笔记】-- 详解vue生命周期

    针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...

随机推荐

  1. Redis---SDS(简单动态字符串)

    Redis 没有直接使用 C 语言传统的字符串表示(以空字符结尾的字符数组,以下简称 C 字符串), 而是自己构建了一种名为简单动态字符串(simple dynamic string,SDS)的抽象类 ...

  2. odoo开发笔记 -- 后台代码什么时候需要注意编码格式

    (1)首先py文件中的注释 中文汉字 一定要加u' ' (2) 前端视图不是多对一的时候,只是普通的字符字段 后台取值 需要加 str装换 head_node_dic['ManualNo'] = st ...

  3. odoo开发笔记--python获取当天时间

    取得时间相关的信息的话,要用到python time模块,python time模块里面有很多非常好用的功能,你可以去官方文档了解下,要取的当前时间的话,要取得当前时间的时间戳,时间戳好像是1970年 ...

  4. 发布上线前,先小秀一把俺的64位浏览器,速度那觉对是杠杠滴,上youtube,上google不费劲

    发布上线前,先小秀一把俺的64位浏览器,速度那觉对是杠杠滴,上youtube,上google不费劲

  5. 启动HDFS之后一直处于安全模式org.apache.hadoop.hdfs.server.namenode.SafeModeException: Log not rolled. Name node is in safe mode.

    一.现象 三台机器 crxy99,crxy98,crxy97(crxy99是NameNode+DataNode,crxy98和crxy97是DataNode) 按正常命令启动HDFS之后,HDFS一直 ...

  6. IdentityServer4之Clients、Scopes、Claims与Token关联

    IdentityServer4之Clients.Scopes.Claims与Token关联 参考 官方文档:client.identity_resource.api_resource:三类配置项介绍描 ...

  7. Java类加载顺序

    很长时间没看这方面的内容了,写篇文章让自己牢记一下,顺便分享一下. 首先,写代码以便检验结果.测试代码: public class Test { public static void main(Str ...

  8. 全网最全的Windows下Anaconda2 / Anaconda3里Python语言实现定时发送微信消息给好友或群里(图文详解)

    不多说,直接上干货! 缘由: (1)最近看到情侣零点送祝福,感觉还是很浪漫的事情,相信有很多人熬夜为了给爱的人送上零点祝福,但是有时等着等着就睡着了或者时间并不是卡的那么准就有点强迫症了,这是也许程序 ...

  9. kafka-java客户端连接

    使用java客户端, kafkaproducer, kafkaconsumer进行kafka的连接 注: 0.10 版本之后, 连接kafka只需要brokerip即可, 不需要zookeeper的信 ...

  10. Java集合——HashMap,HashTable,ConcurrentHashMap区别

    Map:“键值”对映射的抽象接口.该映射不包括重复的键,一个键对应一个值. SortedMap:有序的键值对接口,继承Map接口. NavigableMap:继承SortedMap,具有了针对给定搜索 ...