Vue笔记1
index.html
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body>
<div id="app">
{{ message }} {{name}} {{age}}
<div v-html="html">
{{ html }}
</div>
<span v-bind:class="color">颜色</span> {{ number + 1 }}
{{ 1==1 ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }} <p v-if="seen">v-if</p>
<div @click="click1">
<div @click.stop="click2">
click me
</div>
</div>
</div> <script type="text/javascript">
var data = {
message: 'Hello Vue!',
name: 'ffff',
age: 12,
html: "<span style='color:red'>红色</span>",
color: '',
number:10,
seen:true
}
var app = new Vue({
el: '#app',
data: data,
methods:{
click1:function(){
console.log("click1");
},
click2:function(){
console.log("click2");
}
},
beforeCreate: function() {
console.log("beforeCreate");
},
created: function() {
console.log("created");
},
beforeMount: function() {
console.log("beforeMount");
},
mounted: function() {
console.log("mounted");
},
beforeUpdate: function() {
console.log("beforeUpdate");
},
updated: function() {
console.log("updated");
} })
data.name = '123'
data.age = '18'
app.$data.name = 'victor'
app.$watch('age', function(newVal, oldVal) {
console.log(newVal + " " + oldVal);
})
app.$data.age = '28'
app.$data.color = 'red'
</script> <style type="text/css">
.red {
color: red;
}
</style>
</body> </html>
Vue笔记1的更多相关文章
- Vue笔记目录
Vue笔记目录 一.Vue.js介绍 二.vue基础-vue-cli(vue脚手架) ...持续更新中,敬请期待
- 《Vue笔记01: 我与唐金州二三事》
最近我在收看唐金州在极客时间发布的<vue从入门到精通>,颇有收获. 唐金州,一点资讯前端技术专家,曾在蚂蚁金服就职,也是开源组件库ant design vue的作者,虽然唐老师写的ant ...
- Vue笔记--通过自定义指令实现按钮操作权限
经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...
- Vue笔记（有点乱）
Vue学习笔记(2019.7.31) 目录 Vue学习笔记(2019.7.31) vue 基本指令用法 v-cloak v-text v-html v-bind v-on 跑马灯 v-on v-mod ...
- 一个后端开发的 Vue 笔记【入门级】
一 前言 最近找了些教程,顺带着趴在官网上,看了看 Vue 的一些内容,入门的一些概念,以及基础语法,还有一些常用的操作,瞄了一眼,通篇文字+贴了部分代码 9000 多字,入门语法什么的还是很好理解的 ...
- vue笔记
安装vue脚手架工具 sudo cnpm install -g vue-cli
- vue笔记 递归组件的使用
递归组件 什么是递归组件? 组件自身去调用组件自身. 代码示例 DetailList.vue(子组件-递归组件) <template> <div> <div class= ...
- vue笔记-列表渲染
用v-for把一个数组对应为一组元素 使用方法:v-for="(item,index) in items"//也可以使用of替代in { items:源数组 item:数组元素迭代 ...
- vue笔记-条件渲染
条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...
- 【Vue笔记】-- 详解vue生命周期
针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...
随机推荐
- Tasteless challenges hard WP
hard Level 5- Fred CMS 十有八九是注入,不过测试引号和转义符并没发现什么,于是跑了下密码字典,竟然发现网页提示 sql injection detected! ,然后发现原来是密 ...
- vue组件懒加载
vue2组件懒加载浅析 一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大, ...
- C/S与B/S架构
目录 软件开发架构 C/S架构 数据放在服务端和客户端的利弊: B/S架构 软件开发架构 开发软件,必须要开发一套 客户端 和 服务端 服务端与客户端的作用 服务端:24小时不间断提供服务 客户端:享 ...
- Asp.Net Core 开发之旅之NLog日志
NLog已是日志库的一员大佬,使用也简单方便,本文介绍的环境是居于.NET CORE 3.0 1.安装 Install-Package NLog.Web.AspNetCore 2.创建配置文件 在we ...
- fiddler---Fiddler工具栏功能介绍
前几篇简单的介绍了Fiddler的功能,对于工具栏的操作只是简单了解,今天写一篇工具栏功能介绍和操作. 工具栏功能介绍 工具栏内容 工具栏依次是:会话保存,数据重放(Replay),转到(GO),数据 ...
- RAID5的创建（5块磁盘，三块做raid，两块做备份）
RAID5的创建(5块磁盘,三块做raid,两块做备份) 第一步:参考我的上一篇博客,用同样的方法添加5块硬盘.地址如下: https://www.cnblogs.com/Feng-L/p/11735 ...
- C++：map用法及元素的默认值
C++:map用法 一.map基本用法 键值对 第一个参数为键的类型,第二个参数为值的类型. 源代码 #include <iostream> #include <string> ...
- day53_9_17 django数据库表关联，路由和视图
一.数据库的关系建立. 在原生的数据库语句中,建立表与表之间的联系,就是添加一个字段,将联系的表的id值添加到该字段中. django所作的也就是这些. 以图书管理系统为例,图书管理系统有四张表:书籍 ...
- 剑指Offer-24.二叉树中和为某一值的路径(C++/Java)
题目: 输入一颗二叉树的跟节点和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径.(注意: 在返回值的list中,数组长度大的 ...
- 关于XSS攻击
1.XSS XSS(Cross Site Scripting)攻击全称跨站脚本攻击,为了不与CSS(Cascading Style Sheets)混淆,故将跨站脚本攻击缩写为XSS,XSS是一种经常出 ...