小博

V1

2022/07/06阅读:17主题:全栈蓝

跟着官网学vue (一)

跟着官网学Vue(仗剑走天涯)

安装Vue的4中方式

  • 在页面上以 CDN 包的形式导入
<script src="https://unpkg.com/vue@next"></script>
  • 下载 JavaScript 文件并自行托管

  • 使用 npm 安装它

  • 使用官方的 CLI 来构建一个项目,它为现代前端工作流程提供了功能齐备的构建设置 (例如,热重载、保存时的提示等等)

声明式渲染

<body>
    <script src="https://unpkg.com/vue@next"></script>

    Hello Vue

    <div id="counter">
        Name: {{ name }}<br />
        Age: {{ age }}<br />
        Sex: {{ sex }}<br />
        Count: {{ count }}
    </div>

    <script>

        const Person = {
            data() {
                return {
                    name"xiaobo",
                    age22,
                    sex"男",
                    count0
                }
            },
            mounted() {
                setInterval(() => {
                    this.count++
                }, 1000)
            }
        }

        Vue.createApp(Person).mount('#counter')
    
</script>
</body>

主要理解:数据驱动视图 vue做的不是去改变Dome对象 而是改变变量

绑定元素

v-bind: 可以绑定一个属性

v-on: 可以绑定一个事件

v-model 双向绑定

定义的方法统一写在methods:里面

<body>
    <script src="https://unpkg.com/vue@next"></script>

    Hello Vue

    <div id="counter">
        Name: {{ name }}<br />
        Age: {{ age }}<br />
        Sex: {{ sex }}<br />
        Count: {{ count }}<br/>
        <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息!
        </span>
        <br/>
        <button v-on:click="jia10">+</button>
        <br/>
        <!-- <p>{{ msg }}</p> -->
        <!-- 双向绑定 -->
        <input v-model="formData.username" /><br/>
        <input v-model="formData.password" /><br/>
        <button v-on:click="submit">提交</button>
    </div>

    <script>

        const Person = {
            data() {
                return {
                    name"xiaobo",
                    age22,
                    sex"男",
                    count0,
                    message'运行服务器的时间是:' + new Date().toLocaleString(),
                    msg"我和你已经双向绑定了 咱俩一起共进退了 ",
                    formData: {
                        username"",
                        password""
                    }
                }
            },
            // 每过1000毫秒 也就是1秒进行+1
            mounted() {
                setInterval(() => {
                    this.count++
                }, 1000)
            },
            methods: {
                // 执行的加10点击事件 jia10
                jia10() {
                    this.count += 10
                },
                // 执行的点击事件 submit
                submit() {
                    console.log(this.formData)
                }
            }
        }

        Vue.createApp(Person).mount('#counter')

    
</script>
</body>

条件与循环

<body>
  
  <script src="https://unpkg.com/vue@next"></script>
  
<div id="counter">
  
  
  <div v-if="show">
            你想让我消失吗?
        </div>
        <div v-if="yc">
            <button v-on:click="show = !show,xs = !xs,yc = !yc">隐藏</button><br/>
        </div>
        <div v-if="xs">
            <button v-on:click="show = !show,xs = !xs,yc = !yc">显示</button><br/>
        </div>
  
        <div>
            <ol>
                <li v-for="todo in todos">
                    {{ todo.goods}}
                </li>
            </ol>
        </div>

    </div>

const Person = {
            data() {
                return {
                    show: true,
                    xs: false,
                    yc: true,
                    todos:[{goods:"手机"},{goods:"电脑"},{goods:"Ipad"}]
                }
            },
            // 每过1000毫秒 也就是1秒进行+1
            mounted() {
               
            },
            methods: {
              
            }
        }
</body>

组件化应用

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

nav

view 中间部分

sidebar 左部

content 右部

应用 & 组件实例

MVVM

模型

模型是指代表真实状态内容的领域模型(面向对象),或指代表内容的数据访问层(以数据为中心)。

视图

就像在MVC和MVP模式中一样,视图是用户在屏幕上看到的结构、布局和外观(UI)

视图模型

视图模型是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器,也没有MVP模式的presenter,有的是一个绑定器。在视图模型中,绑定器在视图和数据绑定器(英语:Data binding)之间进行通信。

绑定器

声明性数据和命令绑定隐含在MVVM模式中。在Microsoft解决方案堆(英语:solution stack)中,绑定器是一种名为XAML的标记语言。绑定器使开发人员免于被迫编写样板式逻辑来同步视图模型和视图。在微软的堆之外实现时,声明性数据绑定技术的出现是实现该模式的一个关键因素

vue生命周期

每个阶段都有两个生命周期钩子函数。

创建阶段 beforeCreate,created

挂载阶段 beforeMount,mounted

运行阶段 beforeUpdate,updated

销毁阶段 beforeDestroy,destroyed

所有的生命周期钩子自动绑定 this 上下文到实例中

lifecycle
lifecycle

创建阶段

  • beforeCreate

new Vue()之后触发的第一个钩子,此时 data、methods、computed以及watch上的数据和方法还未初始化,都不能被访问

在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用

  • created

在实例创建完成后被立即调用,此时已完成以下的配置:数据观测 (data observer),property 和方法的运算,watch/event 事件回调

可以使用数据,更改数据,在这里更改数据不会触发updated函数

data 和 methods 都已经被初始化好了,如果要调用 methods 中的方法,或者操作 data 中的数据,最早可以在这个阶段中操作 异步数据的请求适合在 created 的钩子中使用,例如数据初始化

挂载阶段

  • beforeMount

发生在挂载之前,在这之前 template 模板已导入渲染函数编译。此时虚拟Dom已经创建完成,即将开始渲染。在这一阶段也可以对数据进行更改,不会触发updated

执行到这个钩子的时候,在内存中已经编译好了模板了,但是还没有挂载到页面中,此时,页面还是旧的

  • mounted

在挂载完成后发生,此时真实的Dom挂载完毕,数据完成双向绑定,可以访问到Dom节点,使用$refs属性对Dom进行操作

执行到这个钩子的时候,就表示vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点,最早可以在和这个阶段中进行

运行阶段

当vue实例中的数据发生改变时,DOM 也会发生变化

  • beforeUpdate

发生在更新之前,也就是响应式数据发生更新,虚拟dom重新渲染之前被触发,你可以在当前阶段进行更改数据,不会造成重新渲染,但会再次触发当前钩子函数

  • updated

发生在更新完成之后,此时 Dom 已经更新

如果要相应状态改变,最好使用计算属性或 watcher 取而代之。最好不要在此期间更改数据,因为这可能会导致无限循环的更新

销毁阶段

  • beforeDestroy

发生在实例销毁之前,在这期间实例完全可以被使用,我们可以在这时进行善后收尾工作,比如清除计时器

Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于可用状态。还没有真正被销毁

  • destroyed

发生在实例销毁之后,这个时候只剩下了dom空壳。组件已被拆解,数据绑定被卸除,事件监听器被移除,所有子实例也统统被销毁

在大多数场景中你不应该调用这个方法。最好使用 v-if 和 v-for 指令以数据驱动的方式控制子组件的生命周期

<ol id="toDo">
            <todo-item 
            v-for="todoItem in todos" 
            v-bind:todo="todoItem"
            v-bind:key="1">

        </todo-item>
  <div>
            <ol>
                <li v-for="todo in todos">
                    {{ todo.goods}}
                </li>
            </ol>
        </div>

// 定义名为 todo-item 的新组件
        const TodoItem = {
            // 接受参数 从父组件接受
            props : ['todo'],
            template : `<li>{{ todo.goods }} ---- {{ temp }}</li>`,
            data(){
                return {
                    temp : 'xiaobo'
                }
            }
        }

const Person = {
            data() {
                return {
                    name"xiaobo",
                    todos: [{ goods"手机" }, { goods"电脑" }, { goods"Ipad" }]
            },
            beforeCreate(){
                console.log("beforeCreate-----------" + this.name)
                console.log(document.getElementById("toDo"))
            },
            created(){
                console.log("created-----------------" + this.name)
                console.log(document.getElementById("toDo"))
            },
            beforeMount(){
                console.log("beforeMounte----------" + this.name)
                console.log(document.getElementById("toDo"))
            },
            // 每过1000毫秒 也就是1秒进行+1
            mounted() {
                console.log("mounted----------------" + this.name)
                console.log(document.getElementById("toDo"))
            },
        }

模板语法

文本插值

用法 {{}}

v-once 修饰的不会发生改变

原始 HTML

v-html 解析标签

Attribute

v-bind:disabled 可进行绑定

表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

缩写

<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>

<!-- 缩写 -->
<a :href="url"> ... </a>

<!-- 动态参数的缩写 -->
<a :[key]="url"> ... </a>

<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>

<!-- 缩写 -->
<a @click="doSomething"> ... </a>

<!-- 动态参数的缩写 -->
<a @[event]="doSomething"> ... </a>

Data Property

组件的 data 选项是一个函数。Vue 会在创建新组件实例的过程中调用此函数。它应该返回一个对象,然后 Vue 会通过响应性系统将其包裹起来,并以 $data 的形式存储在组件实例中。为方便起见,该对象的任何顶级 property 也会直接通过组件实例暴露出来

methods 选项向组件实例添加方法,它应该是一个包含所需方法的对象

Vue 自动为 methods 绑定 this,以便于它始终指向组件实例

<!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>vue-template</title>

    <script src="https://unpkg.com/vue@next"></script>

</head>
<body>

    <div id="app">

        <span>{{ message }}</span><br>

        <span v-once>{{ message }}</span><br>

        <button v-on:click="update" v-bind:disabled="isButtonDisabled"> 修改 </button>

        <button v-bind:name="anniu">按钮</button>

        <div>
            {{ html }}
        </div>

        <div v-html="html">
            {{ html }}
        </div>

        <div>
            {{ number }}
        </div>
    </div>

    <script>

        const Root = {

            data() {
                return {
                    message"取到我了",
                    html`<h1 style=color:red>xiaobo</h1>`,
                    isButtonDisabledtrue,
                    anniutrue,
                    number1
                }
            },

            methods: {
                update(){
                    this.message = "我变了"
                },
                plus(){
                    this.number++;
                    console.log(this.number);
                },
                xxx(){
                    this.plus();
                }
            },

        };

        //创建一个vue应用 app是一个应用对象
        const app = Vue.createApp(Root);
        //挂载 mv是一个组件
        const mv = app.mount("#app");

        console.log(mv.number);
        mv.xxx();


    
</script>
    
</body>
</html>

计算属性和侦听器

计算属性

对于任何包含响应式数据的复杂逻辑,你都应该使用计算属性

 <div id="computed-basics">
            <p>Has published books:</p>
            <span>{{ publishedBooksMessages }}</span><br>
            <span>{{ publishedBooksMessage }}</span><br>
            <span>{{ publishedBooksMessage }}</span><br>
          </div>
<script>

        const Root = {

           data() {
            return {
                author: {
                    name'John Doe',
                    books: [
                        'Vue 2 - Advanced Guide',
                        'Vue 3 - Basic Guide',
                        'Vue 4 - The Mystery'
                    ]
                }
            }
           },

           //监听
           computed: {

                publishedBooksMessages(){
                    return this.author.books.length;
                },

                publishedBooksMessage() {
                    // `this` 指向 vm 实例
                    return this.author.books.length > 0 ? 'Yes' : 'No';
                }
            },

            mounted() {
                setInterval(() => {
                    this.author.books.push("小博学java");
                }, 1000);
            },


        };

        //创建一个vue应用
        const app = Vue.createApp(Root);
        //挂载
        const mv = app.mount("#app");

    
</script>

计算属性和方法的区别

计算属性将基于它们的响应依赖关系缓存

计算属性只会在相关响应式依赖发生改变时重新求值。这就意味着只要 author.books 还没有发生改变,多次访问 publishedBookMessage 时计算属性会立即返回之前的计算结果,而不必再次执行函数

<!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>vue-template</title>

    <script src="https://unpkg.com/vue@next"></script>

</head>
<body>

    <div id="app">

        <div id="computed-basics">
            <p>Has published books:</p>
            <span>{{ publishedBooksMessages }}</span><br>
            <span>{{ publishedBooksMessage }}</span><br>
            <span>{{ publishedBooksMessage }}</span><br>

            <span>{{ calculateBooksMessage() }}</span><br>
            <span>{{ calculateBooksMessage() }}</span><br>
            <span>{{ calculateBooksMessage() }}</span><br>
          </div>
        
    </div>

    <script>

        const Root = {

           data() {
            return {
                author: {
                    name'John Doe',
                    books: [
                        'Vue 2 - Advanced Guide',
                        'Vue 3 - Basic Guide',
                        'Vue 4 - The Mystery'
                    ]
                }
            }
           },

           methods: {
                calculateBooksMessage() {
                    return this.author.books.length > 0 ? 'Yes' : 'No'
                }
            },

           //监听
           computed: {

                publishedBooksMessages(){
                    return this.author.books.length;
                },

                publishedBooksMessage() {
                    // `this` 指向 vm 实例
                    return this.author.books.length > 0 ? 'Yes' : 'No';
                }
            },

            mounted() {
                setInterval(() => {
                    this.author.books.push("小博学java");
                }, 1000);
            },


        };

        //创建一个vue应用
        const app = Vue.createApp(Root);
        //挂载
        const mv = app.mount("#app");

    
</script>
    
</body>
</html>

侦听器

当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的

<div id="app">
          <div>
            <input v-model="firstName"/><br>
            <input v-model="lastName"/><br>

            full Name : {{ fullName }}<br>
            full Name2 : {{ fullName2 }}
          </div>
    </div>

<script>
  
  const Root = {
                // 数据
                data() {
                    return {
                        firstName"小",
                        lastName"博",
                        fullName"小博"
                    }
                },
                //侦听器
                watch:{
                    firstName(newName,oldName){
                        this.fullName = newName + this.lastName;
                    },
                    lastName(){
                        this.fullName = this.firstName + newName;
                    },
                    
                },
                //计算属性
                computed: {
                    fullName2(){
                        return this.firstName + this.lastName;
                    }
                },
            };

        //创建一个vue应用
        const app = Vue.createApp(Root);
        //挂载
        const mv = app.mount("#app");
  
</script>

Vue 提供了一种更通用的方式来观察和响应当前活动的实例上的数据变动:侦听属性。当你有一些数据需要随着其它数据变动而变动时,watch 很容易被滥用——特别是如果你之前使用过 AngularJS。然而,通常更好的做法是使用计算属性而不是命令式的 watch 回调

你知道的越多 你不知道的越多 嘿 我是小博 带你一起看我目之所及的世界......

分类:

后端

标签:

后端

作者介绍

小博
V1