vue3

最基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    Vue.createApp({
        template: '<div>Hello World</div>'
    }).mount("#app")
</script>
</html>

 

  • createApp()方法：

在第一篇文章编写HelloWorld的时候，就写过这句话Vue.createApp()从英文单词上理解，这个就是创建一个应用create-创建，App-Application-应用，前面的Vue就是Vue这个框架，所以Vue.createApp()的意思就是创建一个Vue的应用。

  • mount()方法

mount()方法就是挂载到某个Html的DOM节点上，它接受一个字符串型参数,参数可以使用CSS选择器，一般都是ID选择器的形式，指定挂载的DOM元素。

mvvm设计模式讲解

Vue的编程设计模式应该叫做mvvm的设计模式。什么叫做mvvm哪？它首先是面向数据的编程，程序中定义了数据，然后定义了模板，Vue就可以把数据和模板自动进行关联。最后挂载到真实的DOM上，展示给用户。

mvvm解释: 第一个m代表model数据，第一个v代表view视图，最后两个字幕vm代表viewModel视图数据连接层。

 

组件使用

<!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="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                inputValue: '',
                list: []
            }
        },
        methods: {
            handleAddItem() {
                this.list.push(this.inputValue)
                this.inputValue = ''
            }
        },
        template: `
            <div>
                <my-title />
                <input v-model="inputValue" />
                <button v-on:click="handleAddItem">增加佳丽</button>
                <ul>
                    <my-jiali 
                        v-for="(item,index) of list"  
                        v-bind:item="item" 
                        v-bind:index="index"  
                    />
                </ul>
            </div>

        `
    })

    app.component('my-title', {
        template: '<h1 style="text-align:center">象牙山洗脚城</h1>'
    })

    app.component('my-jiali', {
        props: ['item', 'index'],
        template: ` <li >[{{index}}]-{{item}}</li>`
    })
    app.mount("#app")
</script>

</html>

Vue3中有八个生命周期函数，

  • beforeCreate( ) ：在实例生成之前会自动执行的函数
  • created( ) : 在实例生成之后会自动执行的函数
  • beforeMount( ) : 在模板渲染完成之前执行的函数
  • mounted( ) : 在模板渲染完成之后执行的函数
  • beforeUpdate ：当data中的数据变化时， 会立即自动执行的函数
  • updated：当data中的数据发生变化，页面重新渲染完后，会自动执行的函数
  • beforeUnmount( ) :当Vue应用失效时，会自动执行的函数
  • unmounted() : 当Vue应用失效时，且DOM完全销毁之后，会自动执行
v-pre指令、v-cloak指令、v-once指令。

1：v-pre指令。

该指令不会解析vue语法，在模板中跳过vue的编译，而是直接把vue代码输出页面。如：

list:"高时银博客"

<div v-pre>{{list}}</div>

本来{{list}}是应该输出list属性的值 “高时银博客”，而使用了 v-pre 指令后，就直接输出源代码{{list}}。

2：v-cloak指令。
这个指令使用机率非常少。vue绑定数据时，渲染时会出现变量闪烁，例如

<div class="#app">
<p>{{value.name}}</p>
</div>

在加载时会看到{{value.name}}在页面出现，过几秒才会渲染数据。而v-cloak就是用来解决这个问题的，如：

<div class="#app" v-cloak>
<p>{{value.name}}</p>
</div>

在css里面要添加：

[v-cloak] {
display: none;
}

这样就可以防止页面闪烁了。不过，实际使用中，我很少看到变量闪烁的情况，也许是数据量太小的缘故吧。

3：v-once指令。

这个指令表示，只渲染一次。

<div v-once>{{massage}}</div>
<input v-model="massage" type="text">
<div>{{massage}}</div>

上面代码中，第一个div中的{{massage}}只渲染一次，当我们在input输入框中修改massge值时，第一个div因使用了v-once指令而不会再发生变化，而第二个div的内容会跟input内容变化而变化

 

@click.stop与@click.prevent

@click.stop 阻止事件冒泡

@click.prevent 阻止事件的默认行为，

<a href="http://www.baidu.com" @click.prevent="test4">百度一下</a>   //阻止a标签跳转，仅执行函数test4

<form  action="/xxx"   @submit.prevent="test5">   //阻止表单提交，仅执行函数test5

         <input type="submit" value="注册">
</form>

@keyup.enter

//按下enter时，执行方法test7

<input type="text" @keyup.enter="test7">

methods: {

      test7 (event) {
        console.log(event.keyCode)
        alert(event.target.value)
      }

}

 计算属性computed: 当计算属性依赖的内容发生变更时，才会重新执行计算

computed:{
    total(){
        return this.price * this.count
    }
},

侦听器中的方法还可以接收两个参数，一个是现在的值（current），一个是变化之前的值（prev）。

watch:{
    count(current,prev){
        console.log('watch changed')
        console.log('现在的值：',current)
        console.log('变化前的值：',prev)
    }
},

 v-model.lazy 

这时候当你在文本框中输入任何内容的时候，插值表达式会跟着改变。如果你不想马上显示，就可以用lazy修饰符，这样就可以实现当输入完成后，失去焦点再进行改变。

 

 

 

posted @ 2021-05-05 19:44  熊大大001(前端开发)  阅读(108)  评论(0)    收藏  举报