vue基础语法（轻松入门vue）

Posted 2021-08-03 xiaojin21cen

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue基础语法（轻松入门vue）相关的知识，希望对你有一定的参考价值。

文章目录

一、HelloWord
二、MVVM设计思想
三、指令
四、Vue常用特性

喜欢不要忘了点个赞哟demo源码

Vue是一套用于构建用户界面的渐进式框架

Vue的核心库只关注视图层，不仅容易上手，还便于与第三方既有项目整合

vue官网

一、HelloWord

引入vue.js
创建一个带有id的dom
编写vue实例，el挂载点对应htmldom，data表示vue实例中的数据

<!--挂载点、模板、与实例   #app这个dom节点在此处为一个挂载点、{{hello}}叫做插值表达式属于模板、vue为一个实例-->
<script src="vue.js"></script>
<div id="app">
    {{hello}}
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            hello:"Hello Vue"
        }
    })
</script>

二、MVVM设计思想

M(model) 模型 ---- javascript Object 数据
V(view) 视图 ---- DOM树、HTML
VM(view-model) 控制：
- view->model ： Dom.listeners 事件监听
- model->view ：data bindings 数据绑定

三、指令

本质就是自定义属性， Vue中指定都是以 v- 开头。

1. v-cloak：防止页面闲烁

防止页面加载时出现闪烁问题

这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak]{display:none}一起用时，编译结束前标签一直有v-cloak属性。

<style>
 [v-cloak]{
     display: none;
 }
</style>

<div id="app">
    <div v-cloak>
        {{hello}}
    </div>
</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"Hello Vue"
        }
    })
</script>

2. v-text

更新元素的 textContent（标签内文字）。如果要更新部分的 textContent ，需要使用 {{ Mustache }}（插值表达式）插值。

<div id="app">
    <div v-text="hello">
    </div>
</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"Hello Vue"
        }
    })
</script>

3. v-html ：相当于 innerHTML()

更新元素的 innerHTML (html标签会被编译)。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。

<div id="app">
    <div v-html="hello">
    </div>
</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"<h1>Hello Vue</h1>"
        }
    })
</script>

4. v-show：切换元素的 display CSS 属性

根据表达式之真假值，切换元素的 display CSS 属性。

当条件变化时该指令触发过渡效果。

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

<div id="app">
    <div v-show="ok" v-html="hello"></div>
    <div v-show="no" v-html="hello"></div>
</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            ok:true,
            no:false,
            hello:"<h1>Hello Vue</h1>"
        }
    })
</script>

4. v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<div id="app">
    <!--  显示的是{{ hello }}跳过编译过程 -->
    <span v-pre>{{ hello }}</span>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"Hello Vue"
        }
    })
</script>

5. v-once ：只渲染元素和组件一次

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<div id="app">
    <!--  只在第一次加载渲染，当你改变hello的值的时候，前端显示不会发生改变  -->
    <span v-once>{{ hello }}</span>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"Hello Vue"
        }
    })
</script>

6. v-model（双向数据绑定）

当数据发生变化的时候，视图也就发生变化；
当视图发生变化的时候，数据也会跟着同步变化。

<div id="app">
    <input v-model="hello">
    <div>{{hello}}</div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:""
        }
    })
</script>

7. v-on 绑定事件

v-on 指令用法

<input type='button' v-on:click='num++'/>

v-on 简写形式

<input type='button' @click='num++'/>

直接绑定函数名称

<button v on:click='say'>Hello</button>

调用函数

<button v on:click='say()'>Say hi</button>

demo

<div id="app">
    <button v-on:click="handelClick">弹出</button>
    <button v-on:click="num++">{{num}}</button>
    <button @click="num++">{{num}}</button>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"<h1>Hello Vue</h1>",
            num:0,
        },
        methods:{
            handelClick:function () {
                alert("haha");
            }
        }
    })
</script>

7.1、事件函数参数传递

如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数

如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

<button v-on:click='say("hi",$event)'>Say hi</button>

demo

<div id="app">
    <button v-on:click="handle1">点击1</button>
    <button v-on:click="handle2(12,$event)">点击2</button>
</div>
<script>
    var vue=new Vue({
        el:"#app",
        data:{

        },
        methods:{
            handle1:function (event) {
                alert(event.target.innerHTML);
            },
            handle2:function (p1,event) {
                alert(p1+event.target.innerHTML);
            }
        }
    })
</script>

7.2、事件修饰符

``.stop` ：阻止冒泡（阻止父级dom节点的事件被触发）

<a v-on:click.stop= "handle"> 跳转 </a>

``.prevent` ：阻止默认行为（a不会触发跳转）

<a v-on:click.prevent="handle"> 跳转 </a>

demo

<div id="app">
    <div v-on:click="handelClick">
        <button v-on:click="handelClick">弹出两次</button>
    </div>
    <div v-on:click="handelClick">
        <button v-on:click.stop="handelClick">弹出一次</button>
    </div>
    <a v-on:click="handelClick" href="https://blog.csdn.net/qq_38723677">跳转</a>
    <a v-on:click.prevent="handelClick" href="https://blog.csdn.net/qq_38723677">不会跳转</a>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"<h1>Hello Vue</h1>",
            num:0,
        },
        methods:{
            handelClick:function () {
                alert("莫逸风");
            }
        }
    })
</script>

7.3、按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

.enter ：回车键

<input v-on:keyup.enter='submit'>

.delete ：删除键与 backspace键

<input v-on:keyup.delete='handle'>

demo

<div id="app">
    弹出提交：<input v-on:keyup.enter='submit'>
    弹出删除：<input v-on:keyup.delete='delete1'>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"<h1>Hello Vue</h1>",
            num:0,
        },
        methods:{
            submit:function () {
                alert("提交");
            },
            delete1:function () {
                alert("删除");
            }
        }
    })
</script>

7.4、自定义按键修饰符

demo打印按键对应按键码

<div id="app">
    弹出按键对应的按键码：<input @keyup="handelClick">
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            hello:"<h1>Hello Vue</h1>",
            num:0,
        },
        methods:{
            handelClick:function (event) {
                //keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持,它可能已经从相关的Web标准中删除
                alert(event.keyCode);
                //KeyboardEvent.code为替代实现，应被使用，但存在部分浏览器还未支持，Vue自定义按键也未支持
                // alert(event.code);
            }
        }
    })
</script>

全局 config.keyCodes 对象（f1指向112号键，112号键命名f1）

Vue.config.keyCodes.f1 = 112

demo

<div id="app2">
    点击按键A弹出提交<input type="text" @keyup.aaa="handel1">
</div>
<script>
    //65是a键的keycode，给他起个别名，在上方就可以使用了
    Vue.config.keyCodes.aaa = 65;
    var vue = new Vue({
        el:"#app2",
        data: {

        },
        methods: {
            handel1:function () {
                alert("提交");
            }
        }
    })
</script>

8. v-bind:attr 绑定属性

v-bind 指令被用来响应地更新 HTML 属性。
v-bind:attr 可以缩写为 :attr 。

v-bind指令语法

<a v-bind:href="url"> {{targ}} </a>

缩写形式

<a :href="url"> {{targ}} </a>

demo

<div id="app">
    <!--  标准形式  -->
    <a v-bind:href="url">{{targ}}</a>
    <!--  简写形式  -->
    <a :href="url">{{targ}}</a>
    <button @click="handel">修改跳转目标</button>
</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            targ:"跳转百度",
            url:"https://www.baidu.com"
        },
        methods:{
            handel:function () {
                if (this.targ=="跳转百度"){
                    this.targ="跳转莫逸风博客";
                    this.url="https://blog.csdn.net/qq_38723677";
                }else {
                    this.targ="跳转百度";
                    this.url="https://www.baidu.com"
                }
            }
        }
    })
</script>

v-bind实现双向数据绑定

<div id="app">
    <input Vue 基础语法入门（转载）
 Vue基础入门讲义-语法基础
 Vue入门基础
 VUE.js入门学习-基础精讲
 Vue基础入门
 Vue基础入门