vue.js学习（一）

最新推荐文章于 2024-08-05 19:35:10 发布

辣姐什么鬼

最新推荐文章于 2024-08-05 19:35:10 发布

阅读量1.8k

点赞数 2

文章标签： web前端 vue.js

本文链接：https://blog.csdn.net/liona_koukou/article/details/53221123

版权

vue.js学习：

1、vue.js是什么？

我们学习一项新技术首先就要搞清楚它是干嘛的。vue.js的作者是这样介绍他的：Vue.js是一套构建用户界面的渐进式框架。vue的核心库只关注视图层。vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件

2、vue.js的使用

首先我们要知道的是vue.js的兼容性，它不支持IE8及其以下版本，这是因为vue.js使用了IE8不能模拟的ECMAScript5特性，所以vue.js支持所有兼容ECMAScript5的浏览器

http://cn.vuejs.org/v2/guide/installation.html 在这里你可以下载vue.js文件，分为开发版本和生产版本。两者的区别就是你在开发的时候最好用开发版本这样会有错误的提示信息，而放在生产上时就用生产版本比较小巧。

这样我们在用的时候只要像在html页面用一些js库一样用<script></script>引入vue.js文件例如：<scriptsrc="vue.js"></script>

接下来我们就可以使用vue来进行开发了

3、构造器

每个vue.js应用都是通过构造函数Vue创建一个Vue的根实例启动的

在<script></script>内开始：

<script> window.onload=function(){ var v=new Vue({ //操作}) } </script>

4、属性与方法

在上面构造器的内部我们一般会用到几个部分分别是el data methods filters

data指的是数据部分，methods指的是方法部分，filters指的是过滤器，具体的写法如下：

<script>

    window.onload= function () {
        new Vue({
            el:'#box',
            data:{
                myData:[],
                t1:'',
                now:-1
            },
            methods:{
                get: function (ev) {
                  
                },
                changeDown: function () {
                  
                },
                changeUp: function () {
                   
                }
            }，
            filters:{
            }
        })
    }
</script>

        new Vue({
            el:'#box',
            data:{
                myData:[],
                t1:'',
                now:-1
            },
            methods:{
                get: function (ev) {
                  
                },
                changeDown: function () {
                  
                },
                changeUp: function () {
                   
                }
            }，
            filters:{
            }
        })
    }
</script>

5、模板语法

跟我们上面的data数据相关的就是模板了。vue.js使用了基于HTML的模板语法，允许开发者声明式的将DOM绑定指底层Vue实例的数据。

数据绑定最常见的形式就是使用“Mustache"语法也就是双大括号的文本插值，用法如下：

假设我们在data里定义了msg数据

data:{msg:"helloworld!"}

那么我们可以在html里这样写：

<p>msg的值是：{{msg}}</p>

用双大括号把msg包起来，这样html里的msg就和data里的msg绑定了，如果data里的msg改变相应的html里的msg值也会发生改变。

当然有时候我们希望只执行一次性的插值，就是说当data里的数据改变时html里的数据不再改变还是第一次时的内容这样需要我们加上一个v-once指令：

<pv-once>msg的值是：{{msg}}</p>

还有些时候我们的msg里面会存放html内容，比如<h1>helloworld!</h1>这时我们希望能在页面有正确的解析。但如果我们直接用{{msg}},在页面上的结果就是<h1>helloworld!</h1>并没有按照我们想要的那样显示，vue.js提供了v-html指令，它让我们可以以h1的格式显示helloworld！使用代码如下

<body>
<div id="box">
    {{msg}}
    <p v-html="msg"></p>
</div>
<script>
    window.onload= function () {
        new Vue({
            el:'#box',
            data:{
                msg:'<h1>hello world</h1>'
            }
        })
    }
</script>
</body>

<div id="box">
    {{msg}}
    <p v-html="msg"></p>
</div>
<script>
    window.onload= function () {
        new Vue({
            el:'#box',
            data:{
                msg:'<h1>hello world</h1>'
            }
        })
    }
</script>
</body>

结果是：

<h1>helloworld</h1>

helloworld

注意：v-html的用法看上面可以知道v-html后面直接写data里的变量名

<span style="color:#fffef6"><<span style="color:#fa00e4"><strong>p </strong></span><span style="color:#ffff00"><u><strong>v-html="msg"</strong></u></span>></<span style="color:#fa00e4"><strong>p</strong></span>></span>

！！注意：当我们在站点上动态渲染任意HTML可能会非常危险，因为他很容易导致XSS攻击。所以需要我们只对可信内容使用html插值，绝不要对用户提供的内容使用插值

6、属性

{{}}双括号不能在html属性中使用，应该使用v-bind指令比如：

<div v-bind:id="ID"><div>

v-bind:属性的写法可以缩写为 :属性推荐使用缩写的形式

:id="id" :width="128px" :height="128px"

属性：

<img src="{{url}}">

这种写法图片不会出来得改成v-bind:src="url"

bind也可以简写:src="url"

推荐属性就用缩写 :属性名

对于class和style又有不同：

class的使用是 :class="[数据名]" ，数据名放在data里

class还有第二种用法：

<p:class="{red:true}">文字。。。</p>

里面那个red是css里的.red只要设置为true就可以用。

所以一种是数组[]可以放多个，第二种是json格式要设置true和false

style的话一定要用json

<span style="color:#800000"><<strong>p :style="{color:'blue'}"</strong>>style</<strong>p</strong>></span>

当然也可以用数组，但一定还是json的

<p :style="[c,d]">style</p>

data:{

    c:{color:'blue'},
    d:{fontSize:'30px'}
}

    d:{fontSize:'30px'}
}

要注意对属性的命名要用驼峰命名法

7、使用JavaScript表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，vue.js都提供了完全地JavaScript表达式支持。

例如：

<!DOCTYPEhtml>

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #list1{
            width:100px;
            height:100px;
            background:#c1e2b3;
        }
    </style>
    <script src="vue.js"></script>
</head>
<body>
<div id="box">
    {{num+1}}<br>
    {{ok?'YES':'NO'}}<br>
    <!--{{message.reverse()}}-->
    <!--{{message.join(',')}}<br>官方里给了这个例子但我使用时提示没有join这方法，当然也没有上面那个reverse方法-->
    <div :id="'list'+id"></div>
</div>
<script>
    window.onload= function () {
        new Vue({
            el:'#box',
            data:{
                num:1,
                ok:false,
                message:'hello,world',
                id:'1'
            }
        })
    }
</script>
</body>
</html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #list1{
            width:100px;
            height:100px;
            background:#c1e2b3;
        }
    </style>
    <script src="vue.js"></script>
</head>
<body>
<div id="box">
    {{num+1}}<br>
    {{ok?'YES':'NO'}}<br>
    <!--{{message.reverse()}}-->
    <!--{{message.join(',')}}<br>官方里给了这个例子但我使用时提示没有join这方法，当然也没有上面那个reverse方法-->
    <div :id="'list'+id"></div>
</div>
<script>
    window.onload= function () {
        new Vue({
            el:'#box',
            data:{
                num:1,
                ok:false,
                message:'hello,world',
                id:'1'
            }
        })
    }
</script>
</body>
</html>

结果：2 NO并且会有一个浅绿色的宽高为100px的div

这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。有个限制就是，每个绑定都只能包含单个表达式，所以类似{{vara=1}}这样的语句不会生效，流程控制也不会生效

8、过滤器

vue.js允许自定义的过滤器，被用作一些常见的文本格式化。过滤器应该被添加在双大括号插值的尾部，前面有一个"|"符号

过滤器函数总接受表达式的值作为第一个参数

格式如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #list1{
            width:100px;
            height:100px;
            background:#c1e2b3;
        }
    </style>
    <script src="vue.js"></script>
</head>
<body>
<div id="box">
    {{message | capitalize}}
</div>
<script>
    window.onload= function () {
        new Vue({
            el:'#box',
            data:{
                message:"welcome to vue.js"
            },
            filters:{
                capitalize: function (value) {
                    return value.toUpperCase();
                }
            }
        })
    }
</script>
</body>
</html>

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #list1{
            width:100px;
            height:100px;
            background:#c1e2b3;
        }
    </style>
    <script src="vue.js"></script>
</head>
<body>
<div id="box">
    {{message | capitalize}}
</div>
<script>
    window.onload= function () {
        new Vue({
            el:'#box',
            data:{
                message:"welcome to vue.js"
            },
            filters:{
                capitalize: function (value) {
                    return value.toUpperCase();
                }
            }
        })
    }
</script>
</body>
</html>

过滤器函数总接受表达式的值作为第一个参数

过滤器也可以串联

过滤器是JavaScript函数，因此可以接受参数

这里，第一个参数当然还是message的值，'arg1'将传给过滤器作为第二个参数，arg2表达式的值将被求值然后传给过滤器作为第三个参数

9、指令

指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM上。

【1】v-if：<pv-if="seen">now you see me</p> v-if将根据表达式seen的值的真假来移除或插入p元素

【2】v-bind: <a v-bind:href="url">链接</a> v-bind指令用来响应的更新HTML属性

【3】v-on：<av-on:click="doSomething"><a> v-on指令，用于监听DOM事件。

10、缩写

v-bind:属性名可以直接缩写为:属性名

v-on:click可以缩写为@click