Vue.js快速入门与核心概念-CSDN博客

本文链接：https://blog.csdn.net/walker_0312/article/details/107040366

VUE

Vue介绍

Vue 是一套构建用户界面的渐进式前端框架。
只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。
特点:
易用：在有 HTML CSS JavaScript 的基础上，快速上手。
灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。

Vue快速入门

下载和引入 vue.js 文件。
编写入门程序。

视图：负责页面渲染，主要由 HTML+CSS 构成。

脚本：负责业务数据模型（Model）以及数据的处理逻辑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门</title>
</head>
<body>
    <!-- 视图 -->
    <div id="div">
        {{msg}}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 脚本(数据来源)
    new Vue({
        el:"#div",
        data:{
            msg:"Hello Vue"
        }
    });
</script>
</html>

Vue快速入门详解

Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。

let vm = new Vue({ 
  	 选项列表; 
 });

选项列表

el 选项：用于接收获取到页面中的元素。(根据常用选择器获取)。

data 选项：用于保存当前 Vue 对象中的数据。在视图中声明的变量需要在此处赋值。

methods 选项：用于定义方法。方法可以直接通过对象名调用，this 代表当前 Vue 对象。
数据绑定

在视图部分获取脚本部分的数据。

{{变量名}}

小结

Vue 是一套构建用户界面的渐进式前端框架。
Vue 的程序包含视图和脚本两个核心部分。
脚本部分

Vue 核心对象。

选项列表

el：接收获取的元素。

data：保存数据。

methods：定义方法。
视图部分

数据绑定：{{变量名}}

Vue 常用指令

指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。
使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。
常用指令

指令	作用
v-html	把文本解析为HTML代码
v-bind	为HTML标签绑定属性值
v-if v-else v-else-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性
v-on	为HTML标签绑定事件
v-model	在表单元素上创建双向数据绑定

指令的写法

v-html

<div v-html="msg"></div>

v-bind

* 普通形式:
<a v-bind:href="url">百度一下</a>
* 简写形式:
<a :href="url">百度一下</a>
<div :class="cls">我是div</div>

v-if v-else v-else-if v-show

<div v-if="num % 3 == 0">div1</div>
<div v-else-if="num % 3 == 1">div2</div>
<div v-else="num % 3 == 2">div3</div>

<div v-show="flag">div4</div>

v-for

<body>
    <div id="div">
        <ul>
            <li v-for="name in names">
                {{name}}
            </li>
            <li v-for="value in student">
                {{value}}
            </li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            names:["张三","李四","王五"],
            student:{
                name:"张三",
                age:23
            }
        }
    });
</script>

第二个的参数为键名(如果遍历的是数组,第二个参数就是它的索引)：

<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>

第三个参数为索引：

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

v-on

* 普通形式
<button v-on:click="change()">改变div的内容</button>
* 简写形式
<button @click="change()">改变div的内容</button>

v-model

表单绑定

v-model：在表单元素上创建双向数据绑定。
作用

将变量和输入框进行双向绑定,变量改变了之后输入框会改变,反之亦然.
双向数据绑定

更新 data 数据，页面中的数据也会更新。

更新页面数据，data 数据也会更新。
MVVM模型(Model View ViewModel)：是 MVC 模式的改进版

在前端页面中，JS 对象表示 Model，页面表示 View，两者做到了最大限度的分离。

将 Model 和 View 关联起来的就是 ViewModel，它是桥梁。

ViewModel 负责把 Model 的数据同步到 View 显示出来，还负责把 View 修改的数据同步回 Model。

在这里插入图片描述

<body>
    <div id="div">
        <form autocomplete="off">
            姓名：<input type="text" name="username" v-model="username">
            <br>
            年龄：<input type="number" name="age" v-model="age">
        </form>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            username:"张三",
            age:23
        }
    });
</script>

自定义组件

本质上，组件是带有一个名字且可复用的 Vue 实例，我们完全可以自己定义。

格式

Vue.component(组件名称, {
 props:组件的属性,
 data: 组件的数据函数,
 template: 组件解析的标签模板
})

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义组件</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="div">
        <my-button msg2="按钮"></my-button>
    </div>
</body>
<script>
    Vue.component("my-button",{
        // 属性
        props:["msg2"],
        // 数据函数
        data: function(){
            return{
                msg:"我的按钮"
            }
        },
        //解析标签模板
        template:"<button style='color:red'>{{msg}},{{msg2}}</button>"
    });

    new Vue({
        el:"#div"
    });
</script>
</html>

* 注:值可以通过props和data两种方式传递

Vue生命周期

在这里插入图片描述

生命周期的八个阶段

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	载入后
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

Vue异步操作

在 Vue 中发送异步请求，本质上还是 AJAX。我们可以使用 axios 这个插件来简化操作！
使用步骤

引入 axios 核心 js 文件。

调用 axios 对象的方法来发起异步请求。

调用 axios 对象的方法来处理响应的数据。
axios 常用方法

方法名	作用
get(请求的资源路径与请求的参数)	发起GET方式请求
post(请求的资源路径,请求的参数)	发起POST方式请求
then(response)	请求成功后的回调函数，通过response获取响应的数据
catch(error)	请求失败后的回调函数，通过error获取错误信息

例

servlet

@WebServlet("/testServlet")
public class TestServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求和响应的编码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        //获取请求参数
        String name = req.getParameter("name");
        System.out.println(name);

        //响应客户端
        resp.getWriter().write("请求成功");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req,resp);
    }
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步操作</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="div">
        {{name}}
        <button @click="send()">发起请求</button>
    </div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"张三"
        },
        methods:{
            send(){
                // GET方式请求
                // axios.get("testServlet?name=" + this.name)
                // 剪头函数 特点:能够使用上下文的this
                //     .then(resp => {
                //         alert(resp.data);
                //     })
                //     .catch(error => {
                //         alert(error);
                //     })

                // POST方式请求
                axios.post("testServlet","name="+this.name)
                    .then(resp => {
                        alert(resp.data);
                    })
                    .catch(error => {
                        alert(error);
                    })
            }
        }
    });
</script>
</html>