vue从入门到放弃？duck不必，vue基础语法带你装逼。

最新推荐文章于 2024-02-04 16:46:55 发布

lb_nizhanban

最新推荐文章于 2024-02-04 16:46:55 发布

阅读量236

点赞数

分类专栏：笔记文章标签： html javascript vue js vue.js

本文链接：https://blog.csdn.net/lb_nizhanban/article/details/106855855

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

作为一个小白程序员必须熟悉各个语言的hello world!我们先从最最最基础的在页面渲染出hello world来了解vue最最最基础的语法。

利用vue实现hello world

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个vue</title>
</head>
<body>
    <!-- vue的{{}} 渲染数据 -->
    <div id="app">{{ msg }}</div>
    <p>{{ content }}</p>
</body>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',//el:挂载入口，让这个div被我们的vue所管理，注意不能挂载在body和html标签上
        data: { //data:设置数据的地方，对象的形式，属性名写好了，到时候在页面里面直接调用就能渲染数据
            msg: 'hello world!',
            content: '我们的第一个vue程序'
        }
    });
</script>
</html>

效果图如下
在这里插入图片描述
想要管理哪个标签，必须挂载对应的入口，没有挂在是不会被管理到的，例如上图中的p标签，
{{}}中放置需要被渲染的数据，被渲染的数据放在data对象中。
小结：设置挂载点，设置数据，渲染就ok了

双向绑定数据
vue其中一个特点是双向绑定数据，也就是著名的MVVM模型，简单来说就是通过数据层控制视图层，视图层通过实例控制数据层。举个例子。

<body>
    <!-- vue的{{}} 渲染数据 -->
    <div id="app">
        <p>{{ msg }}</p>
        <!-- 双向数据绑定 v-model  MVVM -->
        <input type="text" v-model="msg">
    </div>

</body>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',//el:挂载入口，让这个div被我们的vue所管理
        data: { //data:设置数据的地方，对象的形式，属性名写好了，到时候在页面里面直接调用就能渲染数据
            msg: 'hello world!777'
        }
    });
</script>

效果图如下，可见数据层通过设置数据可控制视图层
在这里插入图片描述
当我们改变视图层数据时，通过v-model=“msg”,这个方法把改变了的数据传回数据层中的msg,再次渲染至视图层，（注意数据层中设定的数据不会改变），

除了{{}}的方式以外，还有几种方式可以了解一下，照葫芦画瓢，上代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个vue</title>
    <style>
        [v-clock] {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 渲染数据到页面 -->
    <div id="app">
        <h1>1、{{}} 渲染数据</h1>
        <p>{{ num }}</p>
        <p>{{ num * 2 }}</p>
        <p>{{ msg }}</p>

        <h1>2、v-html 渲染数据</h1>
        <p v-html="msg"></p>

        <h1>3、v-text 渲染数据</h1>
        <p v-text="msg"></p>

        <h1>4、v-once 只渲染一次</h1>
        <p>{{ math }}</p>
        <p v-once>{{ math }}</p>
        <input type="text" v-model="math">

        <h1>5、v-clock 解决{{}}的闪烁问题</h1>
        <p>{{ num }}</p>
        <p v-clock>{{ num }}</p>
    </div>

</body>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',//el:挂载入口，让这个div被我们的vue所管理
        data: { //data:设置数据的地方，对象的形式，属性名写好了，到时候在页面里面直接调用就能渲染数据
            num: 8,
            msg: '<span>今天心情很美好</span>',
            math: 90
        }
    });
</script>

可以发现v-html可以渲染内容，v-text只能渲染文本，v-once只能渲染一次，改变视图中的数据也不会重新渲染数据，兄弟姐妹们可以自行尝试，还有一个就是v-clock可以解决{{}}闪烁问题，{{}}渲染数据有个bug，对于这个问题由于JavaScript去操作DOM，都会等待DOM加载完成（DOM ready）。对于vuejs、angularjs这些会在DOM ready完会才回去解析html view Template，所以对于Chrome这类快速的浏览器你会看见有闪烁的情况出现。
在这里插入图片描述

属性的绑定和事件的绑定
直接上代码感受一下利用v-bind绑定属性可以简写为：，v-on可以绑定事件，事件可以加（）也可以不加，可以简写为@，

<body>
    <div id="app">
        <!-- <img src="https://cn.vuejs.org/images/logo.png" alt=""> -->
        <!-- 1、绑定属性值 v-bind:src -->
        <h1>
            1、绑定属性值 v-bind:src
        </h1>
        <img v-bind:src="imgUrl" alt="">
        <h1>2.v-bind的简写 :href</h1>
        <a :href="link">跳转</a>

        <h1>3、事件的绑定 v-on;事件处理函数可以加(),也可以省略</h1>
        <p>单价：99</p>
        <input type="text" v-model="num">
        <p>总价：{{ total }}</p>
        <!-- <input type="button" value="加1" v-on:click="add"> -->
        <!-- <input type="button" value="加1" v-on:click="add()"> -->
        <input type="button" value="加1" @click="add()">
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',//挂载的入口不能是body和html标签
        data: {
            imgUrl: 'https://cn.vuejs.org/images/logo.png',
            link: 'https://www.baidu.com',
            num: 1,
            total: 0
        },
        methods: {//methods里面是写事件处理函数的
            //一个个的方法
            add: function () {
                // console.log('点我了');
                // console.log(this.num);
                this.num++;
                this.total = this.num * 99;
            }
        }
    });
</script>

此处增加了一个新属性叫methods,是专门用来存放事件处理函数的，标签中绑定的事件调用时就是调用此处的函数。

lb_nizhanban

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue从入门到放弃？duck不必，vue基础语法带你装逼。

作为一个小白程序员必须熟悉各个语言的hello world!我们先从最最最基础的在页面渲染出hello world来了解vue最最最基础的语法。利用vue实现hello world<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
复制链接

扫一扫