邂逅Vue3

elegant lv.1

发布时间：2022-12-30 22:20:39 245

相关标签： # 前端# vue.js# webkit

Hello,我是CoderBug,今天我带大家跟Vue3来一场美丽的邂逅~

1.Vue是什么???

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。全称是Vue.js或者Vuejs；什么是渐进式框架呢？表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目.

邂逅Vue3_App

2.目前Vue在前端处于什么地位？

邂逅Vue3_Vue_02

3.谁是最好的前端框架？

当然，我不会轻易地去给出我的结论：首先，这是一个非常敏感的话题，在很多地方都争论不休，就像很多人喜欢争论谁才是世界上最好的语言一样；

其次，争论这个话题是没有意义的,人才是第一生产力,不能太过依赖框架,要发挥人的主观能动性.那么，就前端来说，学习了HTML、CSS、JavaScript，哪一个框架更容易找到工作？

如果去国外找工作，优先推荐React、其次是Vue和Angular，不推荐jQuery了；

如果在国内找工作，优先推荐、必须学习Vue，其次是React，其次是Angular，不推荐jQuery了；

4.Vue对前端工程师的重要性

邂逅Vue3_vue.js_03

5.如何使用Vue呢？

Vue的本质，就是一个JavaScript的库;

我们可以通过以下方式来使用Vue:

方式一：在页面中通过CDN的方式来引入；

方式二：下载Vue的JavaScript文件，并且自己手动引入；

方式三：直接通过Vue CLI创建项目，并且使用它；

方式一的具体使用:Vue的CDN方式引入:

邂逅Vue3_Vue_04

方式二的具体使用: 下载Vue3的源码,通过script标签进行引入:

邂逅Vue3_App_05

6.案例:计算器案例的实现

<div id="app"></div>
<template id="my-app">
    <div>
        <h2>{{counter}}</h2>
        <button @click='increment'>+1</button>
        <button @click='decrement'>-1</button>
    <div>
</template>
<script src="../js/vue.js"></script>

<script>
 const App = {
     template:"#my-app",
     data(){
         return{
             counter:0
         }
     },
     methods:{
         increment(){
             this.counter++;
         },
         decrement(){
             this.counter--;
         }
     }
 }
 Vue.create(App).mount("#app");
<script><div id="app"></div>
<template id="my-app">
    <div>
        <h2>{{counter}}</h2>
        <button @click='increment'>+1</button>
        <button @click='decrement'>-1</button>
    <div>
</template>
<script src="../js/vue.js"></script>

<script>
 const App = {
     template:"#my-app",
     data(){
         return{
             counter:0
         }
     },
     methods:{
         increment(){
             this.counter++;
         },
         decrement(){
             this.counter--;
         }
     }
 }
 Vue.create(App).mount("#app");
<script>

文章来源： https://blog.51cto.com/u_15921635/5966357

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。