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
仍旧无法使用?打开扩展程序栏,进入详细信息
确认这些选项被勾选~
好啦开始快落!
<!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>
要十分注意的:
过滤器、生命周期与钩子、声明数据与访问数据
标签:el,Vue,formate,接触,var,实例,date,stage1 来源: https://www.cnblogs.com/linbudu/p/10778901.html