Vue初接触 stage1
开始学Vue辣！哈哈哈哈哈真的好好玩啊Vue！这个写法我真的太爱了！
stage1 4-27
先写一下安装Vue devtools时遇到的问题（说来神奇，我是写第一个实例的时候试着在控制台打印了这个空的实例发现Vue很贴心的给出了这个）
注意事项：1.引入的Vue必须是开发版本（development）
2.安装完后出现Vue.js not detected问题，
打开谷歌浏览器扩展程序栏（在“更多工具”中），找到devtools插件，复制这一行id
打开everything（一个很好用的整理、清理文件用的软件，搜索速度非常快），粘贴这一行id，找到这个文件夹（与id同名）
打开这个json文件，将这一项改为true
仍旧无法使用？打开扩展程序栏，进入详细信息
确认这些选项被勾选~
双向数据绑定的原生js实现：
好啦开始快落！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://vuejs.org/js/vue.js"></script>
</head>
<body>
<div id="box1">
<input type="text" v-model="name" placeholder="您的用户名">
<h1>你好，{{ name }}</h1>
<h1 v-html = "link"></h1><!--输出html内容-->
<h1 v-pre>{{ 不会被替换的内容 }}</h1>
</div>
<div id="currentTime">
<p>{{ date }}</p>
<p>{{ date | formateDate }}</p>
<!-- 过滤器还可以串联如 | fliter1 | filter2-->
<!-- 过滤器可以添加参数如 filter('arg1','arg2'),将被传递给第二个和第三个参数 -->
</div>
<div id="simpleCalc">
{{ (num/10) + 9 }}
{{ isOk ? 'sure' : 'nope' }}
{{ text.split(',').reverse().join(',') }}
</div>
</body>
<!-- <script src="https://vuejs.org/js/vue.js"></script> -->
<script>
var initData = {
a:1
}
var app = new Vue({//创建一个vue的根实例，并启动vue应用
el:'#box1',//el用于指定一个页面中已经存在的dom元素挂载这个vue实例，既可以是html元素，也可以是css选择器（getElementById）
data:{
name:'',
a:initData,//可以显式声明数据，也可以指向一个已有的变量，且这二者之间默认建立了双向绑定
link:"<a href = '#'>链接</a>"
},
created:function(){
console.log(this.a);//不能写app.a！会报错
},
mounted() {
console.log(this.$el);
},
})
console.log(app.$el,app.name);//通过这个指针来访问该元素 //生命周期，每个vue实例创建时都会经历一系列初始化过程，同时也会调用相应的生命周期钩子
//created：在实例创建完成后使用，已经完成了数据的观测，但尚未挂载至元素（$el不可用）
//mounted：el挂载完成后调用，一般第一个业务逻辑从这里开始
//beforeDestory：在实例销毁之前调用，一般用于解绑使用事件监听器监听的事件（回收内存？） //一个实时显示当前时间的vue实例 //进行格式化处理
var formate = function(value){
return value < 10 ? '0' + value : value;
}; var showCurrentTime = new Vue({
el:"#currentTime",
data:{
date:new Date()//显示当前时间
},
filters:{//过滤器的使用
formateDate:function(value){
var date = new Date(value),
year = date.getFullYear(),
month = formate(date.getMonth() + 1),
day = formate(date.getDay()),
hours = formate(date.getHours()),
minutes = formate(date.getMinutes()),
seconds = formate(date.getSeconds());
return year + "-" + month + "-" + day + ' ' + hours + ":" + minutes + ":" + seconds;
}
},
mounted() {
var _this = this;//声明一个变量指向vue实例，保证作用域一致，（不是很懂）
this.timer = setInterval(function(){
_this.date = new Date();//每隔一秒更新一次date
},1000)
},
beforeDestroy() {
if(this.timer){//在实例销毁前清除定时器（释放内存？）
clearInterval(this.timer);
}
},
}); var simpleCalc = new Vue({
el:"#simpleCalc",
data:{
num:500,
isOk:true,
text:'1,2,3,4,5,6'
}
});
</script>
</html>
要十分注意的：
过滤器、生命周期与钩子、声明数据与访问数据
Vue初接触 stage1的更多相关文章
- 初接触BurpLoader工具
初接触burp工具 菜鸟一枚,现在在接触一段时间测试,我在测试功能性的时候,想着网站被黑案例那么多,我是不是也应该弄弄安全性测试了,所以就有了下边的第一次接触BurpLoader工具来测试手机的app ...
- 软工实践练习-Git初接触
第一次听到Git,有点不知所云,听了实践课老师的讲解,才明白了Git作为最先进的分布式版本控制系统的重要性. 至于Git的安装和使用仍旧是自己摸索着去完成了,当然在这过程中也是遇到了很多的问题. 接下 ...
- vi初接触
vi初接触 它有三种模式: 一 一般模式 二 编辑模式 三 命令行模式 介绍几种比较常用的吧 -- 退出:q 写入:w 强制:! (以上可叠加) 显示行号:set nu 取消:set nonu 跳转到 ...
- ExtJS初接触 —— 了解 Ext Core
ExtJS初接触 —— 了解 Ext Core Ext Core是一款和jQuery媲美的轻型JS库,基于MIT许可.对于Dom的操作,我个人还是比较喜欢用jQuery.当然如果项目中用的是ExtJS ...
- ExtJS初接触 - 在项目中使用ExtJS
ExtJS初接触 - 在项目中使用ExtJS 今天ExtJS官网发布了ExtJS最新正式版4.2.1.Ext JS 4.2.1 正式版 下载 ExtJS为开发者在开发富客户的B/S应用中提供丰富的UI ...
- Java之路——Java初接触
本文大纲 1.Java是什么 2.Java历史 3.Java技术范围 3.1 Java SE平台技术范围 3.2 Java EE技术范围 3.3 Java 体系技术范围 4.总结 1.Java是什么 ...
- python 之 数据类型初接触
python 之 数据类型初接触 标准数据类型 Python3 中有六个标准的数据类型: Number(数字) String(字符串) List(列表) Tuple(元组) Set(集合) Dicti ...
- Dapr微服务应用开发系列2：Hello World与SDK初接触
题记:上篇介绍了Dapr的环境配置,这次我们来动手尝试一下Dapr应用的开发 Hello World Dapr应用的Hello World其实和其他的Hello World一样简单: 首先用你喜欢的语 ...
- vue 钩子函数的初接触
vue-router的路由钩子函数: 第一种:全局钩子函数. router.beforeEach((to, from, next) => { console.log('beforeEach') ...
随机推荐
- Unity RigidBodyFPSController 鼠标不显示
做第一人称浏览和顶视图浏览时遇到一个坑,就是当切换到第一人称时,操作UI界面的时候就gg,鼠标光标都看不见了. 如下图:LockCursor LockCursor 做了两个操作,第一个就是锁定光标位置 ...
- 2018-2019-2 20165313 《网络对抗技术》Exp4 恶意代码分析
一.实践目标 1.监控你自己系统的运行状态,看有没有可疑的程序在运行. 2.分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,systrac ...
- xamarin android 汉字转拼音
使用微软的 ChnCharInfo.dll,这个库不仅能在 windows 下完美运行,竟单独在android下也可以完美运行,直接引用即可.当然是使用 visual studio 开发安卓啦,具体用 ...
- JavaScript中的ononline事件和onoffline事件
关于这个时间的描述到处都有,但基本上都是说离线在线什么的我一下子还没反应过来.后再在这里看到了一句话:"断开网络再联网试试,就可以看到连线的提示."这才反应过来,原来指的是网络状态 ...
- day-06数据类型与深浅拷贝
深浅拷贝 # 值拷贝:应用场景最多 ls = [1, 'abc', [10]] ls1 = ls # ls1直接将ls中存放的地址拿过来# ls内部的值发生任何变化,ls1都会随之变化 ls2 = l ...
- 我发起并创立了一个 EPWA 的 开源项目
EPWA , 是 Easy PWA 的 意思, PWA 取自于 Google 的 PWA, EPWA 是一个用 C# Cef Html js css 开发 桌面程序 的 架构 ...
- devC++代码格式化对齐的快捷键
devC++代码格式化对齐的快捷键是ctrl + shift + a ctrl + 左右键可以使光标移动一个单词的距离 shirt + 左右键可以选中光标左右的一个字符
- [转]C#调用C++dll
本文转载至http://www.cnblogs.com/ysharp/archive/2012/05/25/2517803.html 在合作开发时,C#时常需要调用C++DLL,当传递参数时时常遇到问 ...
- [ZZ] 边缘检测 梯度与Roberts、Prewitt、Sobel、Lapacian算子
http://blog.csdn.net/swj110119/article/details/51777422 一.学习心得: 学习图像处理的过程中,刚开始遇到图像梯度和一些算子的概念,这两者到底是什 ...
- android studio Authentication failed for
今天更新项目代码提示 Authentication failed for 后来一起是把git平台密码修改了 忘了修改android studio 密码所以更新失败 我在android studi ...