vue介绍与安装与创建实例

x33g5p2x  于2021-08-23 转载在 Vue.js  
字(3.9k)|赞(0)|评价(0)|浏览(575)

一 vue介绍与安装

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

安装vue之前需要安装node.js默认集尘安装npm

查看npm版本

npm -v 

安装vue

$ npm install vue

查看vue版本

vue -V

vue官方文档:https://cn.vuejs.org/v2/guide/instance.html

https://cn.vuejs.org/v2/guide/instance.html

https://cn.vuejs.org/v2/api/

二 Vue实例

2.1创建 vue 实例

var vm = new Vue({
  // 选项
})

el 用于绑定页面已经存在的DOM元素挂载vue实例

<div id="app">
var app = new Vue({
    // 等同于 el:'#app'
    el: document.getElementById('app') 
    })    

vue实例中的data选项用于声明双向绑定的数据

    <div id="app">
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                name: 'zszxz'
            }
        })
        // zszxz
        console.log(app.name)
    </script>

2.2 双向绑定示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>vue-hello-world</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="name" placeholder="姓名">
        <h3>hello world : {{ name }}</h3>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                name: ''
            }
        })
    </script>
</body>
</html>

保存为.html文件;浏览器输入框输入 知识追寻者

2.3 VUE生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程,在此过程中会运行生命周期钩子的函数;用户可以在不同的阶段添加代码;常用如下

  • create 实例创建完成后调用。
  • mounted le挂载实例后调用;
  • beforeDestroy 实例销毁之前调用;
 <div id="app"></div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                name: 'zszxz'
            },
            created: function(){
                // zszxz
                console.log(this.name)
            },
            mounted: function() {
                // <div id="app"></div>
                console.log(this.$el)
            }
        })
    </script>

lifecycle.png

2.4 插值表达式

“{{}}” 双括号为文本插值方法,能进行数据的双向绑定;当属性name的值发生改变时,{{}}中的内容也会随之改变

 <div id="app">{{name}}</div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                name: 'zszxz'
            }
        })
    </script>

如果使用 v-pre 则 {{name}} 括号内容不会被编译

{{}} 还支持简单的运算和三目运算和单个表达式

{{}} 不支持流程控制

<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}

2.5 管道过滤

使用特殊字符 | 可以实现管道过滤功能;

<div id="app">{{data|format}}</div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                data : new Date()
            },
            filters: {
                format: function(value) {
                    var date = new Date(value);
                    var year = date.getFullYear();
                    var month = date.getMonth() + 1;
                    var day = date.getDay();
                    return year +"-"+ month+ "-"+day;

                }
            }
        })
    </script>

串联

{{data|filterA|filterB}

接受参数

其中 argA表示第二个参数,第一个参数是data本身;

{{data|filter(argA,argB)}

2.6 指令事件

使用vue的指令可以很方便的操作DOM;

v-if 表示变量为true时才显示

<div id="app">
        <span v-if="show" >知识追寻者</span>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                show : true
            },
            
        })
    </script>

v-bind 表示动态的更新HTML标签元素属性的值

    <div id="app">
        <a v-bind:href="url" >知识追寻者的博客</a>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                url : "https://blog.csdn.net/youku1327"
            },
            
        })
    // 渲染后为 <a href="https://blog.csdn.net/youku1327">知识追寻者的博客</a>    
    </script>

v-bind可以使用: 代替 ;<a :href="url" >知识追寻者的博客</a>

v-on 表示绑定监听事件;

<div id="app">
        <p v-if="show">知识追寻者</p>
        <button v-on:click = "conceal">点击隐藏</button>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                show : true
            },
            methods:{
                conceal: function() {
                    this.show = false;
                }
            }
        })
    </script>

除了click监听事件之外还有mousemove, keyup等,参考javascript
v-on 可以直接使用@ 代替 ; <button @click = "conceal">点击隐藏</button>

v-html 直接输出标签,很容易导致 XSS 攻击;可以使用尖括号<>转义

<div id="app">
        <span v-html="link"></span></p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                link: '<a href=#>知识追寻者</a>'
            }
        })
    </script>

相关文章