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') ...
随机推荐
- 安装Scala开发环境
Scala 介绍 Step 1: 安装 Java开发环境 Scala 版本与Java版本的兼容关系 从Oracle网站下载JDK URL: http://www.oracle.com/technetw ...
- 2018-2019-2 20165313 《网络对抗技术》Exp4 恶意代码分析
一.实践目标 1.监控你自己系统的运行状态,看有没有可疑的程序在运行. 2.分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,systrac ...
- C语言几个输入函数的区别(史上最详细)
The difference of the string and the character(char): 字符串是一个带有""的字符序列如 "I fuck xuqian ...
- 学习笔记TF054:TFLearn、Keras
元框架(metaframework). TFLearn.模块化深度学习框架,更高级API,快速实验,完全透明兼容. TFLearn实现AlexNet.https://github.com/tflear ...
- spring-aop思想实践demo
需求: 例如我们需要有一个类中每个方法执行前都需要做一个权限校验,必须是有特定权限的账号才能完成该方法的操作. 解决方案: 1.使用父类继承方式,书写该类的父类,然后在父类中定义一个checkPri的 ...
- 实体lis<T>t转换datatable
public static DataTable ListToTable<T>(List<T> list) { Type type = typeof(T) ...
- 【转】SSH穿越跳板机：一条命令跨越跳板机直接登陆远程计算机
转自:http://mingxinglai.com/cn/2015/07/ssh-proxycommand/ 今天在公司搭建跳板机,遇到一个比较麻烦的问题,这里简单记录一下,希望对有相同问题的人有所帮 ...
- SQL Server获取星期几
上一周在解决一个Bug的时候,需要在SQL Server获取星期几的需求,在网上搜索了下,发现一篇好的文章,特转载下! 今天是星期几,例子 1: 1 SET LANGUAGE N'English' - ...
- System.DllNotFoundException: Unable to load DLL 'libgdiplus': The specified module could not be found.
netcore 使用System.Drawing 出现如下错误: Unhandled Exception: System.TypeInitializationException: The type i ...
- Vmware虚拟中克隆主机没IP地址？怎么解决？
Vmware虚拟中克隆主机没IP地址?怎么解决? 修改网卡的配置文件: 清空如下的文件: 重启主机即可!