Vue.js 3.0 学习笔记（二）Vue3的语法

最新推荐文章于 2024-01-12 15:08:26 发布

奥妙无穹

最新推荐文章于 2024-01-12 15:08:26 发布

阅读量412

点赞数

分类专栏： #vue3 文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/qq_44648936/article/details/123418616

版权

#vue3 专栏收录该内容

15 篇文章 5 订阅

订阅专栏

一、创建应用程序举例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>创建应用程序实例</title>
</head>
<body>
<div id="app">
    <!—简单的文本插值-->
    <h2>{{ message }}</h2>
</div>
<!--引入最新稳定的vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例，跟vue2有所不同
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
            message:'萧萧梧叶送寒声，江上秋风动客情。',
           }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

二、插值

文本插值（看上面代码）
原始HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>输出真正的HTML</title>
</head>
<body>
<div id="app">
    <!—简单的文本插值-->
    <h2>{{ website}}</h2>
    <!—输出HTML代码-->
    <h2 v-html="website"></h2>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
            website:'<a href="https://www.baidu.com">百度</a>'
           }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

使用JS表达式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用JavaScript表达式</title>
</head>
<body>
<div id="app">
   <!--使用JavaScript表达式，只能是表达式，而不能是语句-->
    <h2>{{ message.toUpperCase()}}</h2>
    <p>苹果总共{{price*total}}元</p>
 </div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
            message:'apple',
            price:5,
            total:260
           }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

三、方法选项methods

1、使用方法

使用插值方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>字符串翻转</title>
</head>
<body>
<div id="app">
    输入内容：<input type="text" v-model="message"><br/>
    反转内容：{{reversedMessage()}}
 </div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
     //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
            message: ''
           }
        },
         //在选项对象的methods属性中定义方法
        methods: {
            reversedMessage:function () {
                return this.message.split('').reverse().join('')
             }
        }
        //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

使用事件调用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>事件调用方法</title>
</head>
<body>
<div id="app">
      {{num}}
    <p><button v-on:click="add()">增加</button></p>
 </div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
     //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
            num:1
           }
        },
         //在选项对象的methods属性中定义方法
        methods: {
            add:function(){
                this.num+=1
             }
        }
     //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

2、传递参数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>传递参数</title>
</head>
<body>
<div id="app">
      {{num}}
    <p><button v-on:click="add(2)">增加</button></p>
 </div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
     //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
              num:1
           }
        },
         //在选项对象的methods属性中定义方法
        methods: {
            add:function(a){
                this.num+=a
             }
        }
     //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

3、方法之间调用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>方法之间的调用</title>
</head>
<body>
<div id="app">
    {{content}}
    {{way2()}}
 </div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
     //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
              content:"古诗"
           }
        },
         //在选项对象的methods属性中定义方法
        methods: {
            way1:function(){
                alert("东风扇淑气， 水木荣春晖。");
            },
            way2:function(){
            	//这里的$表示特殊的属性或方法，以便与用户定义的属性区分开来
                this.$options.methods.way1();
            }
        }
     //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

四、生命周期钩子函数

认识生命周期钩子函数，跟vue2差不多，详情可以参考之前的文章

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>生命周期钩子函数</title>
</head>
<body>
<div id="app">
    <p>{{msg}}</p>
 </div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
     //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
              msg : "白日照绿草， 落花散且飞。"
           }
        },
        //在实例初始化之后，数据观测(data observer)和event/watcher 事件配置之前被调用。
        beforeCreate:function(){
            console.log('beforeCreate');
        },	
        /* 在实例创建完成后被立即调用。在这一步，实例已完成数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 */
        created:function(){
            console.log('created');
        },
        //在挂载开始之前被调用：相关的渲染函数首次被调用
        beforeMount : function(){
            console.log('beforeMount');
        },
        //el 被新创建的 vm.$el 替换, 挂在成功
        mounted:function(){
            console.log('mounted');
        },
        //数据更新时调用
        beforeUpdate : function(){
            console.log('beforeUpdate');
        },
        //组件 DOM 已经更新, 组件更新完毕
        updated : function(){
            console.log('updated');
        }
     }).mount('#app');
    setTimeout(function(){
            vm.msg = "孤云还空山， 众鸟各已归。";
         }, 4000);
</script>
</body>
</html>

created和mouted的应用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>created与mounted函数的应用</title>
</head>
<body>
<div id="app">
    <ul>
        <li id="b1"></li>
        <li id="b2"></li>
        <li id="b3"></li>
    </ul>
 </div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
     //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
               name:'',
               city:'',
               price:0
           }
        },
         //在选项对象的methods属性中定义方法
        methods: {
            way:function () {
                alert("使用created初始化方法")
            }
        },
        created:function(){
            // 初始化方法
            this.way();
            //初始化数据
            this.name="苹果";
            this.city="烟台市";
            this.price="8.88元/公斤";
        },
        //对DOM的一些初始化操作
        mounted:function(){
            document.getElementById("b1").innerHTML=this.name;
            document.getElementById("b2").innerHTML=this.city;
            document.getElementById("b3").innerHTML=this.price;
        }
     //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

五、指令

参数

v-某某某就是指令，：后面的就是参数

动态参数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态参数</title>
</head>
<body>
<div id="app">
    <p><a v-bind:[attr]="url">百度链接</a></p>
    <p><button v-on:[things]="doSomething">单击事件</button></p>
 </div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
     //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
              attr: 'href',
              things: 'click',
              url: 'baidu.com'
           }
        },
         //在选项对象的methods属性中定义方法
        methods: {
            doSomething: function() {
                alert('触发了单击事件！')
            }
        }
       //在指定的DOM元素上装载应用程序实例的根组件
     }).mount('#app');
</script>
</body>
</html>

事件修饰符

属性后面的.某某某就是修饰符，用于指出指令用特殊方式绑定

六、缩写

v-bind缩写:
v-on缩写@
v-slot缩写#

七、vue的构造

//vue2使用构造函数
const app=new Vue(options);
app.$mount("#app")
Vue.use()

//vue3不存在构造函数，而是应用对象的createApp()
const app=createApp(app);
app.$mount("#app");
app.use();

奥妙无穹

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 3.0 学习笔记（二）Vue3的语法

一、创建应用程序举例<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>创建应用程序实例</title></head><body><div id="app"> <!—简单的文本插值--> <h2>{{ message }}</h2></div>
复制链接

扫一扫

专栏目录