vue基础学习(1.1)：vue入门

最新推荐文章于 2022-10-09 23:50:43 发布

alwaysonline1204

最新推荐文章于 2022-10-09 23:50:43 发布

阅读量208

点赞数

分类专栏： vue、ajax 文章标签： vue

本文链接：https://blog.csdn.net/qq_39198749/article/details/104043430

版权

vue、ajax 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1. 概述

1.1 简述

vue是一款渐进式的JavaScript框架；
可以动态的构建用户界面

1.2 特点

遵循MVVM模式；
编码简洁，体积小，运行效率高，比较适合移动/PC端的开发；
本身只关注UI，可以引入vue插件或者其他第三库的开发项目。

1.3 Vue扩展插件

vue-cli：vue脚手架
vue-router：路由
vue-lazyload：图片懒加载
vue-scroller：页面滑动相关
element-ui：基于vue的UI组件库（PC端）
等插件

2. MVVM模型图

在这里插入图片描述
MVVM解释：

model：模型，数据对象，即data；
view：视图，模板页面；
vm：视图模型（Vue实例）

3. Hello Vue!

官网下载vue.js
https://cn.vuejs.org/v2/guide/installation.html
在项目中引入vue.js(我创建的SpringBoot项目)
创建test.html文件（路径如上图）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    <p>{{message}} </p>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</body>
</html>

(1). var app = new Vue 创建vue实例;
(2). el: 选择器(element);
(3). data: 数据(model);

4. 模板语法

4.1 对于模板的一些理解

就是动态的html页面；
包含了一些JS语法：
(1). 双大括号表达式；
(2). 指令(以v-开头的自定义标签属性)
双大括号表达式{{ }}
(1). 向页面输出数据;
(2). 可以调用对象的方法
指令
(1). 强制数据绑定
使用v-bind:[属性]，或者直接在属性前加一个冒号" : "；
(2). 绑定事件监听
使用v-on:click=“XXX”，或者使用@click=“XXX”,注意XXX表示要调用的方法，该方法写在methods中。
(3). 双向绑定
v-model限制在<input>、<select>、<textarea>、component中使用，主要实现了数据–>视图、视图—>数据的双向绑定

4.2 代码实操

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="test">
    <h3>大括号表达式</h3>
    <p>{{message}}</p>
    <h3>强制数据绑定</h3>
    <img :src="url" width="200px" height="200px"/>
    <h3>绑定事件监听</h3>
    <input type="text"v-model="message">
    <button type="button" @click="test(message)">点击</button>
</div>
<script src="./js/vue.js"></script>
<script>
    const vm = new Vue({
        el: "#test",
        data: {
            message: "hello vue",
            url: "http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg",
        },
        methods: {
            test(val) {
                alert(val);
            }
        }
    });
</script>
</body>
</html>

运行结果：
在这里插入图片描述

alwaysonline1204

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础学习(1.1)：vue入门

1. 概述1.1 简述vue是一款渐进式的JavaScript框架；可以动态的构建用户界面1.2 特点遵循MVVM模式；编码简洁，体积小，运行效率高，比较适合移动/PC端的开发；本身只关注UI，可以引入vue插件或者其他第三库的开发项目。1.3 Vue扩展插件vue-cli：vue脚手架vue-router：路由vue-lazyload：图片懒加载vue-scro...
复制链接

扫一扫