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

素颜马尾好姑娘i 2023-07-01 06:30 17阅读 0赞

# 1. 概述 #

## 1.1 简述 ##

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

## 1.2 特点 ##

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

## 1.3 Vue扩展插件 ##

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

# 2. MVVM模型图 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5_size_16_color_FFFFFF_t_70]  
MVVM解释：

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

# 3. Hello Vue! #

1.  官网下载vue.js  
    [https://cn.vuejs.org/v2/guide/installation.html][https_cn.vuejs.org_v2_guide_installation.html]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5_size_16_color_FFFFFF_t_70 1]
2.  在项目中引入vue.js(我创建的SpringBoot项目)  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5_size_16_color_FFFFFF_t_70 2]
3.  创建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 对于模板的一些理解 ##

1.  就是动态的html页面；
2.  包含了一些JS语法：  
    (1). 双大括号表达式；  
    (2). 指令(以v-开头的自定义标签属性)
3.  双大括号表达式\{ \{ \}\}  
    (1). 向页面输出数据;  
    (2). 可以调用对象的方法
4.  指令  
    (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>

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200121165214106.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5,size_16,color_FFFFFF,t_70
[https_cn.vuejs.org_v2_guide_installation.html]: https://cn.vuejs.org/v2/guide/installation.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200121163000300.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200121163224285.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200122154743343.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk4NzQ5,size_16,color_FFFFFF,t_70