Vue.js学习之旅（一）

最新推荐文章于 2024-05-22 13:52:22 发布

徐小通

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量201

点赞数

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

本文链接：https://blog.csdn.net/niepan990810/article/details/109047190

版权

Vue.js学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue.js的学习之旅（一）

1.创建第一个简单的vue应用

在此已经默认我们安装好了vue.js。如何安装可借鉴vue.js官网vue.js

下面我们创建第一个简单的vue应用。
前期学习，我们先使用<script src="vue.js"></script>标签来引入vue.js。
在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./test.css">

    <script src="vue.js"></script>

</head>

<body>
    <p id='demo1'>{{message}}--{{name}}</p>

    <script>
        var data1 = { message: 'Hello Vue.js!',name:'xuxiaotong' };

        var vm1 = new Vue({
            el: '#demo1',
            data: data1
        });

    </script>

</body>

</html>

渲染结果：

vm1使我们new vue的一个对象，这个对象在实例中有两个重要的属性：
el 参数，它其实是 DOM 元素中的 id。
data 用于定义属性，实例中有两个属性：message和name。
{{ }} 用于输出对象属性和函数返回值。

2.数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
在上面的实例的基础上我们做一些更改：

    <script>
        var data1 = { message: 'Hello Vue.js!',name:'xuxiaotong' };

        var vm1 = new Vue({
            el: '#demo1',
            data: data1
        });
        
        data1.message = 'new vue';

    </script>

添加了data1.message = "new vue";,其渲染结果：

当我们使用vm1来改变属性的时候，结果怎么样呢？？

    <script>
        var data1 = { message: 'Hello Vue.js!',name:'xuxiaotong' };

        var vm1 = new Vue({
            el: '#demo1',
            data: data1
        });

        // data1.message = 'new vue';
        vm1.message = "let us go!";

    </script>

渲染结果：
在这里插入图片描述
由此我们可以得知：document.write(data1.message == vm1.message);的输出结果的确为true。
除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

        document.write(vm1.$data === data1) // true
        document.write("<br>")
        document.write(vm1.$el === document.getElementById('demo1')) // true

3.生命周期

下图展示了实例的生命周期（图片源自vue.js官网）。
在这里插入图片描述
我们先学习其中几个生命周期函数，随着我们的不断学习和使用，它的参考价值会越来越高。

<script>
        var data1 = { message: 'Hello Vue.js!', name: 'xuxiaotong' };

        var vm1 = new Vue({
            el: '#demo1',
            data: data1,

            beforeCreate: function () {
                // 实例初始化之后，事件配置之前调用。
                console.log("beforecreate" + ' message: ' + this.message)
            },
            created: function () {
                // 实例创建之后立即被调用，此时el属性不可见。
                console.log("created" + ' message: ' + this.message)
            },
            beforeMount: function () {
                // 挂载开始之前调用
                console.log("beforeMount" + ' message: ' + this.message)
            },
            mounted: function () {
                // el被$el替换，挂载成功。
                console.log("mount" + ' message: ' + this.message)
            },
            beforeUpdate: function () {
                // 数据更新时调用。
                console.log("beforeUpdate" + ' message: ' + this.message)
            },
            updated: function () {
                // DOM更新完毕。
                console.log("updated" + ' message: ' + this.message)
            }
        });
        vm1.message = "new massage";
    </script>

在这里插入图片描述
生命周期钩子的 this 上下文指向调用它的 Vue 实例。不要在选项 property 或回调上使用箭头函数，。因为箭头函数并没有 this。

4.模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

插值

文本
数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值，例如：

  <p id='demo1'>{{message}}--{{name}}</p>

在这里介绍几条执行v-once指令，该指令可以允许你进行一次插值，但是后续数据改变时，插值处内容不会改变，请留心这会影响到该节点上的其它数据绑定，下面例子：

<body>
    <p id='demo1' v-once>{{message}}--{{name}}</p>

    <script>
        var data1 = { message: 'Hello Vue.js!', name: 'xuxiaotong' };

        var vm1 = new Vue({
            el: '#demo1',
            data: data1
        });
        vm1.message = "new massage";
    </script>

</body>

渲染结果：
在这里插入图片描述

HTML
**{{ }}**会将数据解释为普通文本，想要真正获得html代码，我们就要用到v-html指令，来输出HTML代码。
下面例子显示v-html指令的用法效果：

<body>
    <div id="demo1">
        <p>{{message}}--{{name}}</p>
        <p>massage:{{rawhtml}}</p>
        <p v-html="rawhtml"></p>
    </div>
    <script>
        var data1 = { message: 'Hello Vue.js!', name: 'xuxiaotong', rawhtml: '<span style="color: red;">HTML code</span>' };

        var vm1 = new Vue({
            el: '#demo1',
            data: data1
        });
        vm1.message = "new massage";

    </script>

</body>

渲染效果：
在这里插入图片描述
此处和<p><span style="color: red;">HTML code</span></p>的效果是一样的。

站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

属性
HTML 属性中的值应使用 v-bind 指令。
v-bind 用法：v-bind : 属性 = “属性值”;
简单的小例子：

<body>
    <div id="demo1">
        <p>{{message}}--{{name}}</p>
        <p>massage:{{rawhtml}}</p>
        <p v-html="rawhtml"></p>
        <div v-bind:class="test"></div>
    </div>
    <script>
        var vm1 = new Vue({
            el: '#demo1',
            data: {
                message: 'Hello Vue.js!',
                name: 'xuxiaotong',
                rawhtml: '<span style="color: red;">HTML code</span>',
                test: "test1"
            }
        });
        vm1.message = "new massage";

    </script>
    <style>
        .test1 {
            height: 50px;
            width: 50px;
            background-color: red;
        }
    </style>

</body>

在这里我们在html里面新添加了一个div，并给其绑定一个动态的样式，test即为该样式的变量，当你在vue的data中给test赋值后，html中就会多了一个class为test1的标签。
在这里插入图片描述
然后，当你对test1进行样式声明后，HTML的渲染结果：

表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。
话不多少，直接举例说明：

        <p>{{num + 1}}</p>
        <p>{{ok ? "yes" : "no"}}</p>
        <p>{{msg.split('').reverse().join('')}}</p>

var vm1 = new Vue({
            el: '#demo1',
            data: {
                message: 'Hello Vue.js!',
                name: 'xuxiaotong',
                rawhtml: '<span style="color: red;">HTML code</span>',
                test: "test1",
                
                num:100,
                ok:true,
                msg:'xuxiaotong'
            }
        });

渲染结果：
在这里插入图片描述
最后注意：内容是单个表达式。

指令

指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

先上两个小例子了解了解。

<p v-if = "seen">v-if test</p>

seen:false//内容不可见

此处的seen就相当于p标签的样式属性display，被赋值为false那当然就是display:none；了。

我们再来一小例子，开饭之前先垫垫肚子嘛。

    <div id="app">
        <div v-if=" role == 'admin' || role == 'super_admin' ">您好;admin</div>
        <div v-else-if=" role == 'hr' ">您好：hr</div>
        <div v-else="">您无权访问</div>
    </div>

      var vm2 = new Vue({
            el:"#app",
            data: {
                role:"admin"
            }
        })

渲染结果：
在这里插入图片描述
下面进入正餐：

参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
例如， v-bind 指令被用来响应地更新 HTML 属性：

    <div id="app">
        <a v-bind:href = 'url'>我的GitHub</a>
    </div>

<div id="app">
        <a :href = 'url'>我的GitHub</a>
    </div>

当然上面这两种是一样的。

        var vm2 = new Vue({
            el:"#app",
            data: {
                url:"https://github.com/xulantong/javascript_test"
            }
        });

渲染结果：
我的GitHub
在这里插入图片描述
再来个例子，v-on:用于监听 DOM 事件。

<a v-on:click = "myfunction" href="#">test</a>

<a @click = "myfunction" href="#">test</a>

当然上面这两种是一样的。

            methods:{
                myfunction:function(){
                    document.getElementById('vontest').innerHTML = "vontest";
                }
            }

渲染效果：
在这里插入图片描述
点击test，就会在上面的p标签内加入新内容。
同时，method用于定义的函数，也可以通过 return 来返回函数值。

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

<a v-bind:[attributeName]="url"> ... </a>

例如，如果你的 Vue 实例有一个 data property attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。

修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
来个小例子：

<div @click = "click1">
            <div  @click = "click2"> test2</div>
        </div>

var vm2 = new Vue({
            el:"#app",
            data: {
                url:"https://github.com/xulantong/javascript_test",
            },
            methods:{
                myfunction:function(){
                    document.getElementById('vontest').innerHTML = "vontest";
                },
                click1:function(){
                    console.log("click1...");
                },
                click2:function(){
                    console.log("click2...");
                }
            }
        });

在这里插入图片描述
如上，click2执行的时候也会执行click1，.stop就是一个修饰符，用于事件执行完立即停止。

<div @click = "click1">
            <div  @click.stop = "click2"> test2</div>
        </div>

将HTML改为上面，其输出结果：
在这里插入图片描述
还有很多修饰符，当我们学到的时候我们在进行深入学习介绍。

用户输入
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

        <p>{{ message }}</p>
        <input v-model="message">

      data: {
                message:"xuxiaotong"
            },

渲染效果：
在这里插入图片描述
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

    <p>{{ message }}</p>
    <button @click="reverseMessage">反转字符串</button>

new Vue({
  el: '#app',
  data: {
    message: 'xuxiaotong!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

渲染效果：
在这里插入图片描述

过滤器
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示。
过滤器函数接受表达式的值作为第一个参数。

举例子来啦：

<div id="app">
  {{ message | capitalize }}
</div>

new Vue({
  el: '#app',
  data: {
    message: 'xuxiaotong'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return '';
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  }
})

渲染结果：
在这里插入图片描述
其中，其中value就是{{ message | capitalize }}中的message 。

filter带有参数时：

<p>{{msg | filterA(1,2,3)}}</p>

            data: {
                url: "https://github.com/xulantong/javascript_test",
                message:"xuxiaotong",
                msg:10
            },
            filters:{
                filterA(value,arg1,arg2,arg3){
                    return value + arg1 + arg2 + arg3;
                }
                            //结果为16
            }

多个filter时：

<p>{{msg | filterA(1,2,3) | filterB(2)}}</p>

            data: {
                url: "https://github.com/xulantong/javascript_test",
                message:"xuxiaotong",
                msg:10
            },

            filters:{
                filterA(value,arg1,arg2,arg3){
                    return value + arg1 + arg2 + arg3;
                },
                filterB(value,arg1){
                    return value * arg1;
                }
                         //输出结果为32
            }
        });

filterA执行完后的返回值为filterB的第一个参数，以后也是依次类推。

这次的学习就先到这里了，拜拜辽各位。

徐小通

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue.js学习之旅（一）

Vue.js的学习之旅（一）1.创建第一个简单的vue应用在此已经默认我们安装好了vue.js。如何安装可借鉴vue.js官网vue.js下面我们创建第一个简单的vue应用。前期学习，我们先使用<script src="vue.js"></script>标签来引入vue.js。<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-
复制链接

扫一扫