vue 踩坑只旅（三），HelloWorld/常用指令

最新推荐文章于 2023-12-21 16:54:24 发布

wayne丶

最新推荐文章于 2023-12-21 16:54:24 发布

阅读量431

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_39408204/article/details/85280374

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

扯点最基本的废话。

Vue主要是“面向数据”编程。当数据发生改变时使用虚拟DOM来更改某一DOM节点，避免将整个页面渲染

vue.js作者尤雨溪,现在是马爸爸的人，个人觉得vue现在是国内目前最火的前端mvvm框架（model-view-ViewModel），相对于angular 和 recat，vue 的学习路线相对简单，中文文档和资料相对详细，比较容易上手，当然也没有想象的那么简单。还要告诉你们个天（cao）大（dan）的好消息就是尤大大已经在微博上说过 vue3.0可能马上要出世了。不管vue更新到什么版本都得从最基础的入门，

强调：不支持ie低版本，谁要兼容ie8，请把眼睛移到右上角，看见那个叉叉没，点击它。Now，go out and hurry up.

说到这里又想多说几句题外话其实吧我接触vue也就一年的时间在这里写博客并不是说我对vue有多懂，因为最近项目不忙，我也只是想把我学过再过一遍总结总结，做了留痕。当然如果能帮助到看到这篇文章的你，我也会很高兴。

推荐一门不错的视频教程：在腾讯课堂里面搜索vue2.0小白入门视频教程，讲师是米斯特吴。十分推荐大家闲暇的时候可以看看。对应的还有很多实战类视频，多动手多实践。

前面两章说过了 vue项目的安装和各类配置项。但下面几章我们引用外部script学习，如果不会引入的同学请点链接>传送门

start

HelloWorld

学习一门新技术 helloworld肯定是必经之路。

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>
    </body>
    <script>
        new Vue({
            el: '#app',
            data: {
                message:'Hello World!' 
            }
        })
    </script>
</html>

在这个例子中，el属性指向view层。将vue实例挂在到#app上。data核心作用是存放显示在页面上的数据。

指令

1.1 v-text

作用：操作元素中的纯文本

快捷方式：{{}}

    <body>
        <div id="app" v-text="message">
        </div>
    </body>
    <script>
        new Vue({
            el: '#app',
            data: {
                message:'Hello wayne'   
            }
        })
    </script>

1.2 v-html

作用：操作元素中的html

<body>
   <div id="app" v-html="message"> </div>
</body>
    <script>
        new Vue({
            el: '#app',
            data: {
                message:'Hello wayne' 
        })
    </script>

1.3 v-bind

作用：v-bind绑定页面中的元素属性。class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。

语法：v-bind:元素的属性名 = “data中键名”

//简写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

//html绑定class
<div class="static"  v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
//html 绑定style 拼接
<div :style="{ fontSize: size + 'px' }"></div>

上述的 isActive hasError size 都是在实例data里面定义的属性。

这一章对vue指令做一些简单的示例，v-bind在日常开发中有很多的用法近两天我会整理一篇v-bind的文章出来详细吧v-bind说一说。

1.4 v-show v-hide

作用：判断是否显示隐藏，有jquery经验的同学都应该接触过show hide就很容易理解，

语法：v-show="true/false"

 <!-- v-show小案例 -->
       <div id="app">
            <button @click="isShow = !isShow">点击切换</button>
            <div v-show= "isShow" >
                {{message}}
            </div>
        </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                isShow:'true',
                message:'陈美丽同学请坐下发言' 
            }
        })
    </script>

使用v-show特点就是会在dom中渲染出来，只是被设置了css display：node 属性；

1.5 v-if v-else

作用：v-if接收bool类型。true的话则生成html，false则不生成。或者直接将元素remove掉。

语法：v-if=”判断表达式”

<body>
        <!-- v-if小案例 -->
        <div id="app">
        <button  @click='isIf= !isIf'>点击查看</button>
            <h1 v-if="isIf">{{message}}</h1>
            <h1 v-else>{{message1}}</h1>
        </div>
    </body>
    <script>
        new Vue({
            el: '#app',
            data: {
              message:'陈美丽同学请坐下',
              message1:'陈独秀同学请坐下',
              isIf:true,
            },
           
        })
    </script>

v-else 必须在v-if 后面使用同等与javascript中 if判断；当然也可以用来多重判断

v-if和v-show优缺点

v-if和v-show都是用来控制元素的渲染。v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

1.6 v-on 事件绑定

作用：v-on指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法：v-on

<body>
        <!-- v-on小案例 -->
        <div id="app">
        <button  @click="alertfun()">点击查看</button>
          
        </div>
    </body>
    <script>
        new Vue({
            el: '#app',
            data: {
              message:'陈美丽同学请坐下',
            },
            methods:{
                alertfun:function(){
                    alert(this.message)
                }
            },
        })
    </script>

简写为如 @click

1.7 v-model双向数据绑定

作用：v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定的。根据控件类型v-model自动选取正确的方法更新元素。

 <body>
        <!-- v-model小案例 -->
        <div id="app">
        <input type="text"  v-model="message">
        <h2>{{message}}</h2>
        </div>
    </body>
    <script>
        new Vue({
            el: '#app',
            data: {
              message:''
            },
           
        })
    </script>

在v-model指令后面还可以添加多个参数（number、lazy、debounce）。

下面属于vue定义的事件修饰符。

1.number

如果想要用户的输入自动转换为Number类型（如果原值的转换结果为NAN，则返回原值），则可以添加一个number特性。

2.lazy

在默认情况下，v-model在input事件中同步输入框的值与数据，我们可以添加一个lazy特性，从而将数据改到在change事件中发生。

3.debounce

设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作（例如，在input中输入内容时要随时发送ajax请求），那么它较为有用。

结语：

vue的这些指令在日常开发的使用频率非常高，看了简单的用法可以结合起来做一个实例来加强自己的熟练度，比如万年不变的todolist。

同行没回头前端路上我们一起走。

最后的最后再吐个槽

今天整理这篇文章的时候电脑蓝屏了两次第一次还好第二次在我写结语的时候蓝屏。重启后 csdn竟然没有自动给我存草稿。又撸了一边。

wayne丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 踩坑只旅（三），HelloWorld/常用指令

扯点最基本的废话。Vue主要是“面向数据”编程。当数据发生改变时使用虚拟DOM来更改某一DOM节点，避免将整个页面渲染vue.js作者尤雨溪,现在是马爸爸的人，个人觉得vue现在是国内目前最火的前端mvvm框架（model-view-ViewModel），相对于angular 和 recat，vue 的学习路线相对简单，中文文档和资料相对详细，比较容易上手，当然也没有想象的那么简单。还要告...
复制链接

扫一扫