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') ...
随机推荐
- IntelliJ IDEA 使用教程
在IDEA当中,Project和 Module是作为两个不同的概念,对项目结构是重要意义的 eclipse和idea的区别 IDEA里面的子工程要称为Module就是模块化的概念,作为聚合工程亦或普 ...
- QT5.10+VS2013 TCP 一对一简单C/S架构通信
---恢复内容开始--- QT~俺老孙又回来啦~ 买的那本书上面关于tcp的内容就七八页,而且都是过于简单的东西,想进一步就要度娘很久很麻烦,还是喜欢看书(嘿嘿嘿~) 大致的思路就是两个项目,一个cl ...
- async await 同时发起多个异步请求的方法
@action getBaseInfo = async() => { let baseInfo; try { baseInfo = await getBaseInfo(this.id); if ...
- 常规DP专题练习
POJ2279 Mr. Young's Picture Permutations 题意 Language:Default Mr. Young's Picture Permutations Time L ...
- C 标识符, 数据存储形式（原码,反码,补码）
一. 标识符 第一个字母必须是英文字母或下划线 二. 数据存储形式(补码存储) 最高位是符号位 ---- 0表示整数 ; 1 表示负数 1. 正数:原码 = 反码 = 补码 例子 : (10) 原码 ...
- 1、Nexus安装
1.nexus 下载地址: https://sonatype-download.global.ssl.fastly.net/nexus/oss/nexus-2.14.5-02-bundle.tar.g ...
- Windows和Office激活工具Kmsauto Net
对于微软操作系统和OFFICE的激活,以前笔者用过 ”HEU_KMS_Activator_v11.2.0” ,不过这个工具速度相对比较慢.今天给大家推荐一个新的激活工具:KmsautoNet . 很简 ...
- Linux中KVM桥接的配置
Linux中KVM桥接的配置 1. 原理 1.1 说明 在安装一个拥有虚拟化功能的Linux操作系统(此处以CentOS为例),一般我们有两种方法: .在光盘安装的时候安装好虚拟化包或者PXE服务器上 ...
- 使用starUML画顺序图
https://blog.csdn.net/gary0917/article/details/79968762
- MySQL 索引的增删查
查看索引: > SHOW INDEX FROM table_name; > SHOW KEYS FROM table_name; 删除索引: > DROP INDEX index ...