正在进入ing...

Vue学习笔记-基础篇内部指令等

发布时间:2020-09-08 浏览量: 3583 文章分类: 前端相关

Vue自己自学了一段时间。顺带也整理一下自己学习的路线和学习心得，方便以后遇到问题可以在回来查询。这个系列我会定期更新下去。当做自己的一个文档库。本次主要是最基础的Vue基础相关。

安装篇

在Vue的官方上可以直接引入开发环境或生产环境的js，主要就是生产环境对js文件进行了压缩，并且去除了一些警告和提示。日常的开发，我们一般都是使用开发环境即可。 在引入这块也是比较简单的。可以直接在html的head中，引入vue.js即可。以下就是一个简单的样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HeeloWorld1</title>
    <script  src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>HelloWorld</h1>
    <hr />
    <div id="app">
        {{message}}
    </div>


    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                message:'hello world!'
            }
        })
    </script>
</body>
</html>

v-if & v-else & v-show 学习笔记

v-if &v-else 可以在标签中进行判断

通过v-if&v-else可以快速的判断页面要展示的内容

    <div id="app">
        <div v-if="isLogin">您好，已经登陆</div>
        <div v-else>您还没有登录</div>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                isLogin:false
            }
        })
    </script>

类似上面这样就通过在data里面的变量来影响页面的展示和提示。如果isLogin是真的话，页面就会提示已经登陆，反之则提示没有登陆。 需要注意的是，v-if和v-else是必须要连着的，中间不能用其他的标签间隔等，否则会报错

v-show

v-show其实如果是光看的话，和上面的区别并不大，但是如果查看dom的话，可以看到v-show实际是已经渲染到页面了，但是属性是display:none只是在页面隐藏而已，而v-if&v-else则是判断是否渲染到页面中。

v-for 循环

和javascript中的for循环类似，遍历数组、对象，然后可以进行操作。

    <div id="app">
        <ul>
            <li v-for="item of items">
                {{item}}
            </li>
        </ul>
   <script>
        var app = new Vue({
            el: '#app',
            data: {
                items: [53, 23, 7, 14, 54, 36, 28],
            }
        })
    </script>

这样就可以遍历data中的数据来展示到页面中，简单来说 需要哪个标签循环展示数据，v-for就写到那个标签中，比如上面的li标签就是需要循环展示的标签。

v-text & v-html

这个是负责标签输出到页面的样式。举例来说，比如我们要输出一段html到页面展示就可以直接使用v-html

    <div id="app">
        <span>{{message}}</span>
        <span v-text="message"></span>
        <span v-html="message"></span>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:"<h2>Hello World!</h2>"
            }
        })
    </script>

类似上面的代码，相同的数据额，两个不同的展示标签，就会在页面展示不一样的效果，v-html会让页面渲染出本身的样式等，而v-text则不会。 同时v-text还有一个好处，会比直接使用{{}}这种差值表达式要好，也就是我们日常在页面如果用很多的差值表达式，在页面没有刷新出来的时候，会出现直接显示花括号的问题，所以使用v-text 是一种更优雅的方式。

v-on 事件绑定

v-on是一个事件绑定标签，比如常见的v-on:click或者绑定一些键盘事件，例如v-on:keyup.enter当按下回车键触发等。 v-on是可以缩写成@来代替的，例如v-on:click可以简写成@click

    <button v-on:click="others">按钮</button>
    <button @click="others">按钮</button>

上面的2个按钮实现的效果是完全一样的 同样的道理，下面的2个输入框实现的也是完全一样的

    <input type="text" v-on:keyup.enter="other">
    <input type="text" @keyup.enter="other">

v-model 双向数据绑定

其他的框架其实我也没接触过，不过好像看很多文章都在说这个算是Vue的一个亮点。至少我知道的 微信小程序就是单向数据绑定，而并非双向的。所谓的双向就是 data的数据会影响到页面的展示，而在页面的操作也会改变data的数据。 同时绑定数据的同时也支持.lazy、.number、.trim三种方法 + .lazy 就是不会实时显示，比如在input中就是在失去焦点的时候才会再次触发 + .number 是输入数字，不接受字母（不过貌似这个功能 你先输入字母，在输入数字他也没办法） + .trim 去除首位空格的

   <div id="app">
        <p>原始数据：{{message}}</p>
        <br />
        <h3>文本框：</h3>
        <p>v-model<input type="text" v-model="message"></p>
        <p>v-model.lazy<input type="text" v-model.lazy="message"></p>
        <p>v-model.number<input type="text" v-model.number="message"></p>
        <p>v-model.trim<input type="text" v-model.trim="message"></p>
    </div>


    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:"hello world!",
            }
        })
    </script>

v-bind 绑定

<p><img v-bind:src="imgSrc"></p>
<p><a :href="webUrl" target="_blank">我的博客</a></p>

类似上面这样的，我们就可以在通过http请求从后台获取到数据，然后直接在页面中显示了。或者直接给页面添加跳转的链接地址等。 v-bind也有简写，可以直接缩写为:即可。

其他

  • v-pre 原样输出
  • v-cloak 渲染完毕后才展示
  • v-once 只渲染一次，后续在有改变什么的也不会在更新了 这些都是比较简单的标签，只要本地尝试一下，基本就知道是干嘛的了。