Vue的入门学习

最新推荐文章于 2024-10-03 19:13:18 发布

I'm always here

最新推荐文章于 2024-10-03 19:13:18 发布

阅读量176

点赞数

分类专栏： Vue学习文章标签： Vue 前端

本文链接：https://blog.youkuaiyun.com/weixin_44619613/article/details/96031458

版权

Vue学习专栏收录该内容

1 篇文章

订阅专栏

1、挂载点和模版，实例之间的关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门</title>
    <!-- <script src="./vue.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <!--###01 挂载点,模板,实例之间的关系-->
    
     <!--<div id="root"></div> vue实例的挂载点
                只会去处理挂在点之下的内容
        模板可以写在挂在点的的内部，也可以写在实例的template里面
                                        -->
    <div id="root">

    </div>

<script>
    new Vue({
        el: "#root",
        template:'<h1>vue {{msg}}</h1>',
        data: {
            msg: "hello world"
        }
    })
</script>
</body>
</html>

2、事件的绑定,方法和数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门</title>
    <!-- <script src="./vue.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
   
    <!--###02 实例中的数据，事件和方法
    插值表达式: ｛｛｝｝
    <div v-text="content"></div>  输出：<h1>hello</h1>
    <<div v-html="content"></h1>  输出：hello
    v-on事件:点击hello弹出123
    v-on事件简写： <div @click="handleClick">{{content}}</div>
    -->
    <div id="root">
        <div @click="handleClick">{{content}}</div>
    </div>

<script>
    new Vue({
        el: "#root",
        data: { 
            content:"hello"
        },
        methods:{
            handleClick:function () {
                //alert(123)
                this.content= "world"
            }
        }
    })
</script>
</body>
</html>

3、Vue中的属性绑定和双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的属性绑定和双向数据绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!--###03 属性绑定
<div v-bind:title="title">hello world</div>模板绑定
 v-bind:title=""  ”"代表js表达式
 v-bind 缩写   只写一个 :
 单向绑定：数据决定页面的显示,但是页面如法决定数据的内容
 双向绑定：v-model

  -->
        <div id="root">
           <div :title="title">hello world</div>
            <input v-model="content"/>
            <div>{{content}}</div>
        </div>

        <script>
            new Vue({
                el:"#root",
                data:{
                    title:"this is hello world",
                    content:"this is a content"
                }
            })
        </script>
</body>

</html>

4、Vue中的计算属性和监听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的计算属性和监听器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
     <!--    computed：计算属性
             watch：监听属性
                             -->
    <div id="root">
           姓： <input v-model="firstName"/>
           名： <input v-model="lastName"/>
        <div>{{fullName}}</div>
        <div>{{count}}</div>
    </div>

        <script>
            new Vue({
                el:"#root",
                data:{
                    firstName:'',
                    lastName:'',
                    count:0
                },
                computed: {
                    fullName: function () {
                        return this.firstName+ ' '+this.lastName
                    }
                },
                watch: {
                    fullName:function () {
                        this.count++
                    }
                   
                }
       })
        </script>
</body>
</html>