其他分享
首页 > 其他分享> > Vue初接触 stage1

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