vue学习笔记

最新推荐文章于 2019-07-24 18:12:16 发布

围巾的ACM

最新推荐文章于 2019-07-24 18:12:16 发布

阅读量403

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/qq_21057881/article/details/96028977

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

好久没更新啦，一直忙于工作，感觉是时候要抽点时间出来进修一下啦，暂时在学习vue，虽然作为一个后台开发，但是感觉前端的东西还是要懂一丢丢的，暂时先从慕课上面的课程学起吧，记下一些笔记之类的

<html lang="en">
<head>
    <meta charset="utf-8">
        <style>
            .bg {
                color:red;
            }
        </style>
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    </meta>
</head>
<body>
    <div class="bg">
        HelloWorld
        {{msg}}
    </div>

    <div id = "test">
        <div class="wj" v-bind:id="my_id">
            {{msg}}
        </div>
        {{count+1}}
        <!--<a v-bind:href="url">baidu</a>-->
        <a :href="url">baidu</a>
        <br/>
        <!--<button type="button" v-on:click="submit()">加数字</button>-->
        <button type="button" @click="submit()">加数字</button>

    </div>
</body>

<script>
    new Vue({
            el:'.bg',
            data:{
                msg:"Hello Vue",
            }
    })

    new Vue({
            el:'#test',
            data:{
                msg:"Hello My Test",
                my_id:"wj",
                count:0,
                url:'http://www.baidu.com',
            },
            methods:{
                submit:function(){
                    this.count ++;
                }
            }
    })
</script>
</html>

第一个vue的demo，学到了一个vue的基本写法，其中 el是绑定到哪个id上，如果你想绑定到class上的话，要写 .bg这样，如果是绑定到id上的话，就加#号就可以了。（如果是绑定到class上的话，有多个一样的话，他会绑定到第一个上的，所以最好还是绑定到id上吧。）

然后如果想绑定一些执行的方法，就直接写 @click=submit()就可以了，不用像以前一样写js，只要定义在那个vue里面的methods就可以了，跳转链接的话也是直接冒号 :href 到一个变量里，然后在vue结构体里面你自己定义就行了。

<html lang="en">
<head>
    <meta charset="utf-8">
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    </meta>
</head>
<body>
    <div id="app">
        {{msg}}
        <p>
            {{msg1}}
        </p>
    </div>
</body>

<script>
    var arr = 'new test'
    var app = new Vue({
            el:'#app',
            data:{
                msg:"Hello Vue",
                another:'another Hello Vue',
            },
            watch:{
                msg:function(newval,oldval) {
                    console.log('newval is : '+newval)
                    console.log('oldval is : ' + oldval)
                }
            },
            computed: {
                msg1: function (){
                    return 'computed:' + this.msg + ',' + this.another + arr
                }
            }
    })

</script>
</html>

第二份demo，主要是看watch和computed两个方法

watch相当于用来监听一个变量发生改变时候的情况

computed 可以用于多个，只要一个变了，他就会重新渲染一下数据

<html lang="en">
<head>
    <meta charset="utf-8">
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    </meta>
</head>
<body>
    <div id="app">
        <div v-if="count > 0">
                count大于0,count的值是:{{count}}
        </div>
        <div v-else-if="count < 0 && count > -5">
                count的值是：{{count}}
        </div>
        <div v-else>
                count小于-5啦{{count}}
        </div>
        <div v-show="count == -1">
            123123123:   {{count}}
        </div>

        <div v-for="item in list">
            <div v-if="item.age > 28" v-bind:style="styleMsg" :class="{'myClass':true}">
                {{item.name}}
            </div>
            <div v-else>
                {{item.age}}
            </div>
        </div>
    </div>
</body>

<script>
    var arr = 'new test'
    var app = new Vue({
            el:'#app',
            data:{
                msg:"Hello Vue",
                count:1,
                styleMsg:{
                    color:'red',
                    'text-shadow':'0 0 5px #232323',
                },
                list:[{
                    'name':'wj',
                    age:29,
                },{
                    'name':'xiaozhang',
                    age:18,
                }],

            },
    })

</script>
</html>

这里主要是看v-for的列表循环

围巾的ACM

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vue学习笔记

好久没更新啦，一直忙于工作，感觉是时候要抽点时间出来进修一下啦，暂时在学习vue，虽然作为一个后台开发，但是感觉前端的东西还是要懂一丢丢的，暂时先从慕课上面的课程学起吧，记下一些笔记之类的<html lang="en"><head> <meta charset="utf-8"> <style> ...
复制链接

扫一扫