RUNOOB教程Vue学习笔记day2

最新推荐文章于 2023-08-21 20:16:49 发布

原创最新推荐文章于 2023-08-21 20:16:49 发布 · 1.0k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文是作者在学习Vue.js第二天的笔记，详细记录了在JavaScript基础上深入Vue.js的关键概念和实践经验，包括组件化开发、指令使用、响应式原理等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Study Day2</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <h1>This is Vue study day2</h1>

    <div id="test">
        <h1>site: {{site}}</h1>
        <h1>url: {{url}}</h1>
        <h1 @click="aaa">{{detail()}}</h1>
    </div>

    <div id="test1">
        <h1>site: {{site}}</h1>
        <h1>url: {{url}}</h1>
        <h1>Alexa: {{alexa}}</h1>
    </div>

    <div id="test2">
        <div v-html="message"></div>
    </div>

    <div id="test3">
        <label for="r1">修改颜色</label>
        <input type="checkbox" v-model="use" id="r1">
        <br>
        <!-- <div v-bind: class="{'class1': use}">
            v-bind: class 指令
        </div> bind:class之间不能有空格 -->
        <div v-bind:class="{'class1': use}">
            v-bind: class 指令
        </div>
        <pre><a v-bind:href="url">百度一下</a></pre>
        <!-- v-bind:href可以简写为:href -->
        <!-- <a :href="url"></a> -->
    </div>

    <div id="test4">
        <!-- normal input:<input type="text" name="text name" /> -->
        <label for="p1">clike me</label>
        <input type="checkbox" v-model="seen" name="sdsfsdf" id="p1">
        <p v-if="seen">{{message}}</p>
    </div>

    <div id="test5">
        <p>{{message}}</p>
        <input v-model="message">
        <button v-on:click="reverseMessage">反转字符串</button>
        <!-- v-on:click可以缩写为@click -->
        <!-- ，<button @click="reverseMessage"></button> -->
    </div>

    <div id="test6">
        {{ message | capitalize }}
        <!-- {{ message | filterA('arg1', arg2) | filterB }} -->
        <!-- 过滤器函数可以多个，函数参数也可以多个 -->
    </div> 
    <!-- <div :id="rawId | formatId"></div> -->

    <div id="test7">
        <p>您的分数是：{{mark}}</p>
        <div v-if="mark >= 90">优秀</div>
        <div v-else-if="mark >= 80">中等</div>
        <div v-else-if="mark >= 60">及格</div>
        <div v-else>不及格</div>
        <!-- {{#if ok}}
            <h1>test handlebars 模板</h1>
        {{/if}} -->
        <h1 v-show="ok">show 也 ok</h1>
    </div>

    <br>

<script type="text/javascript">
    var vm = new Vue({
        el: '#test',
        data: { 
            site: "百度一下",
            url: "wwww.baidu.com"
        },
        methods: {
            detail: function() {
                return this.site + ' 你就知道——';
            },
            aaa: function() {
                alert("test")
            }
        }
    })

// 使用！+ 回车可以快速构建html界面
// el参数绑定标签ID,只对该标签域起作用
// data参数用于给用户定义属性
// method用于定义函数，使用return返回函数值
// {{}}用于输出对象属性和函数返回值
// 构建Vue项目时可以对vue实例进行双向绑定，即修改一方另一方自动同步更新
</script>

<script>
// 构建数据对象
var data = {site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
var vm2 = new Vue({
    el: '#test1',
    data: data
})

// 引用相同对象
document.write(vm2.site === data.site) //true
document.write("<br>")

// 设置属性会影响原始数据
vm2.site = "Runoob"
document.write(data.site + "<br>") //Runoob
// 相反也一样
data.alexa = 1234
document.write(vm2.alexa + "<br>") //1234

// 添加$前缀表示实例的属性和方法与用户属性区分
document.write(vm2.$data === data) //true
document.write("<br>")
document.write(vm2.$el === document.getElementById('test1')) //true
</script>

<script>
// v-html指令：用于输出html代码
new Vue({
    el: '#test2',
    data: {
        message: '<h1>菜鸟教即时输出</h1>'
    }
})

// v-bind指令：绑定html元素属性值
new Vue({
    el: '#test3',
    data: {
        use: false,
        url: 'http://www.baidu.com'
    }
})

// v-if指令：条件表达式
new Vue({
    el: '#test4',
    data: {
        seen: false,
        message: 'now you can see me, haha'
    }
})

// v-model指令：用来在input、select、textarea、checkbox、radio表单控件上的双向数据绑定
new Vue({
    el: '#test5',
    data: {
        message: '初始化',
    },
    methods: {
        reverseMessage: function() {
            this.message =  this.message.split('').reverse().join('')
        }
    }
})
</script>

<script>
new Vue({
    el: '#test6',
    data: {
        message: 'runoob'
    },
    filters: {
        capitalize: function(value) {
            if(!value) 
                return 'null'
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
        }
    }
})
</script>

<script>
new Vue({
    el: '#test7',
    data: {
        mark: parseInt(Math.random()*100),
        ok: true
    }
})
</script>

<style>
.class1 {
    background: #444;
    color: #eee;
}
</style>

</body>
</html>