Vue基础入门——概述+语法

最新推荐文章于 2022-12-02 16:23:25 发布

莫小夕儿呀

最新推荐文章于 2022-12-02 16:23:25 发布

阅读量240

点赞数

分类专栏： java前端

本文链接：https://blog.csdn.net/weixin_45044097/article/details/104245975

版权

java前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

- Vue

Vue

1 概述

1.1 vuejs入门

Vue.js 是一个构建数据驱动的web界面的渐进式框架。目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。易上手，便于第三方库或既有项目整合。
官网：https://cn.vuejs.org/v2/guide/

1.2 MVVM模式

Model-View-ViewModel ，本质是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化，将视图UI和业务逻辑分开。
MWVM模式和MVC模式样,主要目的是分离视图(View) 和模型(Model)。
Vue.js是一个提供了MVVM风格的双向数据绑定的JavaScript库，专注于View层。核心就是VM，也就是ViewModel（负责连接View和Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、快捷）。
在这里插入图片描述

1.3 前期准备

maven-----archetype.maven-archetype-webapp
在这里插入图片描述
页面放在webapp下面

1.4 入门案例

在这里插入图片描述
配置Tomcat，启动服务器，访问http://localhost:8989/vuedemo/demo1.html

2 语法

2.1 插值表达式

数据绑定最常见的形式就是使用"Mustache"语法(双大括号)的文本插值，Mustache 标签将会被替代为对应数据对象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。

Vue.js都提供了完全的JavaScript表达式支持。
{ { number + 1 } }
{ { ok ? 'YES' : 'NO' } }

这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效

{ { var a = 1 } } //这是语句不是表达式
{ { if (ok) { return message  } } }  //流控制也不会生效

实现页面热部署：不重启服务器，刷新
在这里插入图片描述

2.2 VueJS常用系统指令

1 v-on

可以用v-on指令监听DOM事件，并在触发时运行一些JavaScript事件。

v-on:click——绑定点击事件

报红：alt+enter
v-on:keydown——键盘按下事件
传统的js事件

<body>
    <div id="app">
 		Vue:<input type="text" v-on:keydown="fun($event)">
        <hr/>
        传统JS:<input type="text" onkeydown="showKeyCode()"/>
     </div>
</body>
<script>
    // 传统js的键盘按下事件
    function showKeyCode() {
        //event对象和我们的document对象以及window对象是一样的，可以不用定义直接使用
        var keyCode = event.keyCode;
        //alert(keyCode);
        if(event.keyCode == 13){
            alert("你按的是回车键")
        }
//      if (keyCode < 48 || keyCode > 57){
          // 不让键盘的按键起作用
//        event.preventDefault();
//      }
	
	new Vue({
        el:"#app",
        methods:{
        //    $event它是vue中的事件对象，和传统js的event对象是一样的
            fun:function (event) {
                var keyCode = event.keyCode;
                if (keyCode < 48 || keyCode > 57){
                    // 不让键盘的按键起作用
                    event.preventDefault();
                }
            }
        }
    });
    }
</script>

keyCode数值
event.preventDefault()——阻止事件默认行为

v-on:mouseover——鼠标悬浮事件
传统的js方式

    <div id="app">
        <div onmouseover="divmouseover()" id="div">
            <textarea onmouseover="textareamouseover()">这是另一个文件域</textarea>
        </div>
    </div>
    ......
    function divmouseover() {
        alert("鼠标移动到div上");
    }
    function textareamouseover() {
        alert("鼠标移动到textarea上了");
        event.stopPropagation();//鼠标停在文件域上不会弹出“鼠标移动到div上”
    }

@事件名称：@mouseover是v-on:mouseover的简写

<div v-on:mouseover="fun1" id="div">
	<textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>
</div>
......
new Vue({
        el:"#app",
        methods:{
            fun1:function () {
                alert("鼠标停留在div上");
            },
            fun2:function (event) {
                alert("鼠标停留在textarea上");
                event.stopPropagation();
            }
        }
    });

event.stopPropagation()——阻止事件传播

2 事件/按键修饰符

事件修饰符

<body>
    <div id="app">
        <form action="demo1.html" method="post" onsubmit="return checkForm()">
            <input type="submit" value="提交">
        </form>
    </div>
</body>
<script>
    // 传统的js
    function checkForm() {
        alert(1);
        // 表单验证必须有一个明确的boolean类型返回值
        // 在应用验证方法时必须加上一个 return 方法名称
        return false;
    }
</script>

@submit.prevent，@mouseover.stop的使用

<div id="app">
        <form @submit.prevent action="demo1.html" method="post">
            <input type="submit" value="提交">
        </form>
        <hr/>
        <div @mouseover="fun1" id="div">
            <textarea @mouseover.stop="fun2($event)">这是一个文件域</textarea>
        </div>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        methods:{
            fun1:function () {
                alert("鼠标停留在div上");
            },
            fun2:function (event) {
                alert("鼠标停留在textarea上");
            }
        }
    });
</script>

按键修饰符

<body>
    <div id="app">
    	Vue:<input type="text" v-on:keydown,enter="fun1">
    </div>
</body>
<script>
    new Vue({
       el:"#app",
       methods:{
       		fun1:function(){
       			alert("按下的是回车");
       		}
       }
    });
</script>

v-on:keydown=@keydown触发按下回车键的事件
在这里插入图片描述

3 v-text,v-html,v-bind

<body>
    <div id="app">
<!--        <div id="div1"></div>-->
<!--        <div id="div2"></div>-->
        <div v-text="message"></div>
        <div v-html="message"></div>
    </div>
</body>
<script>
    new Vue({
       el:"#app",
       data:{
           message:"<h1>hello Vue</h1>"
       }
    });
    // 传统js的innerText和innerHTML
    window.onload = function () {
        document.getElementById("div1").innerHTML="<h1>hello</h1>";
        document.getElementById("div2").innerText="<h2>hello</h2>";
    }
    
    new Vue({
        el:"#app",
        methods:{
            fun1:function () {
                alert("鼠标停留在div上");
            },
            fun2:function (event) {
                alert("鼠标停留在textarea上");
            }
        }
    });
</script>

在这里插入图片描述
v-bind
写在文本内的，给标签的属性赋值

4 v-for

v-for遍历数组
在这里插入图片描述

v-for遍历对象

5 v-model

在这里插入图片描述

v-if与v-show

3 生命周期

8个生命周期的执行点，4个基本的，4个特殊的。

4 axios的ajax异步请求

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中
在这里插入图片描述

5 综合案例

莫小夕儿呀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue基础入门——概述+语法

文章目录Vue1 概述1.1 vuejs入门1.2 MVVM模式2 语法3 生命周期4 axios的ajax异步请求5 综合案例Vue1 概述1.1 vuejs入门Vue.js 是一个构建数据驱动的web界面的渐进式框架。目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。易上手，便于第三方库或既有项目整合。https://cn.vuejs.org/1.2 MVVM模式M...
复制链接

扫一扫