Vue起步

缺乏、安全感 2022-11-07 04:18 149阅读 0赞

## Vue与原生js对比 ##

用一个案例来说明两者的区别：

*  原生js

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <input type="text" v-model="msg" id="msg" />
        <br />
        <span></span>
        <script>
            let msg_ele = document.querySelector("#msg");
            let span_ele = document.querySelector("span");
            msg_ele.addEventListener("keyup", () => {
                let that = msg_ele
                span_ele.innerHTML = that.value;
            });
        </script>
    </body>
    
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70][]

*  vue

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 1]

*  区别

最明显的区别：**vue 中不用操作 dom 元素**

这可以让开发者将经历集中到数据处理及业务逻辑开发中

当然，这只是 vue 带来的变化之一

通过上面的 vue 案例，总结 vue 的使用方法

*  创建dom结构，作为vue实例挂载点，vue实例中的所有数据只能在此dom范围内使用

*  通过 new Vue 创建 vue 实例
 *  el 属性指定当前 vue 实例的挂载点
 *  data 中是模型数据，这些数据依赖于当前的vue实例，可以在控制台中通过下面方式访问data中数据

app.msg

*  可以通过插值表达式使用 data 中的数据

## 渲染 ##

vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
    	//html部分书写 div盒子id设置为app是为了做整个页面的挂载点
        <div id="app">
            {
       { message }}  //渲染vue语法中data内的message值（一定要用双花括号来渲染）
        </div>
        //书写vue语法前一定要引入vue
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        //书写vue语法
        <script>
        //创建vue实例
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                }
            })
        </script>
    </body>
    
    </html>

![在这里插入图片描述][20210311075604508.png]

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是**响应式的**

除了文本插值，我们还可以绑定元素attribute ：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 2]

`v-bind` attribute 被称为**指令** 指令带有前缀 `v-`，以表示它们是 Vue 提供的特殊attribute

它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 `title` attribute 和 Vue 实例的 `message` property 保持一致”

## 条件与循环 ##

*  条件判断

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 3]

在控制台输入 `app3.seen = false`，你会发现之前显示的消息消失了

再次`app3.seen = true`，你会发现之前消失的消息显示了

*  v-for渲染

![在这里插入图片描述][20210311075637754.png]

在控制台输入 `app4.todos.push({ text: '新项目' })`，你会发现列表最后添加了一个新项目

## 处理用户输入 ##

![在这里插入图片描述][2021031107564834.png]

Vue 还提供了 `v-model` 指令，它能轻松实现表单输入和应用状态之间的双向绑定

![在这里插入图片描述][20210311075657643.png]

## 组件化结构应用 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 4]

![在这里插入图片描述][20210311075712378.png]

这样子还不够，我们应该能从父作用域将数据传到子组件才可以，让我们来修改一下组件的定义，使之能够接受一个 prop：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app-7">
            <ol>
                
                <item-li v-for="item in msg" v-bind:item="item" v-bind:key="item.id"></item-li>
            </ol>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            // 定义名为 item-li 的新组件
            Vue.component('item-li', {
                props: ['item'],
                template: '<li>{
       {item.id}}---{
       {item.name}}</li>'
            })
    
            var app7 = new Vue({
                el: '#app-7',
                data: {
                    msg: [{
                        id: 1,
                        name: 'zhangsan'
                    }, {
                        id: 1,
                        name: 'zhangsan'
                    }, {
                        id: 1,
                        name: 'zhangsan'
                    }, {
                        id: 1,
                        name: 'zhangsan'
                    }]
                }
            })
        </script>
    </body>
    
    </html>

![在这里插入图片描述][20210311075728524.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70]: /images/20221023/ec8afc69b0ea46ce974803f385471817.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 1]: /images/20221023/d37ae7ca092149ff946942af62004b2d.png
[20210311075604508.png]: /images/20221023/b402040b7b5647fbb130302c76c4dfda.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 2]: /images/20221023/cc9a699a3acf4860ae0c839897687c39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 3]: /images/20221023/4774c2b520414444ada7981ac47fb4d3.png
[20210311075637754.png]: /images/20221023/00f3a455cfb046c7b221a00df4b473d8.png
[2021031107564834.png]: /images/20221023/29bc7d54f24a418d951d601469b5d7af.png
[20210311075657643.png]: /images/20221023/e17b6220d4f442ea8e6f21743222f777.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 4]: /images/20221023/84eac7ac33bf42bfbdf456fe635346eb.png
[20210311075712378.png]: /images/20221023/2a17a3ce1fbc4aa3ae14248989f783ab.png
[20210311075728524.png]: /images/20221023/9b78e5c970a945ab93af82f32e315402.png