宇讯一资源

vue

发布于2021年11月04日 | 暂无评论 | 117阅读 | 其它

vue cli

  1. 安装
    npm install -g @vue/cli @vue/cli-service-global

  2. 切换到vue 当前目录运行

    • vue serve
    • vue serve XXX.vue //指定的文件
  3. Vue.js 添加到项目中主要有四种方式:

    • 在页面上以CDN 包的形式导入。
      -下载 JavaScript 文件并自行托管。
      -使用npm安装它。
      -使用官方的CLI来构建一个项目,它为现代前端工作流程提供了功能齐备的构建设置 (例如,热重载、保存时的提示等等)。
  4. {{}} 标签对标里

    {{message}}

    v-text 标签内

    v-html 有包含html标签

    v-on:click="" 缩写 @click=""
    v-model(radio,textarea,input,select,checkbox)
    v-bind 用于处理html标签的动态属性,即动态赋值。

  5. 在运行 Vue 项目的时候,npm run serve(vue3.0) 和 npm run dev(vue2.0) 的区别就在于 vue-cli 脚手架的版本
    查看packwage.json文件

  6. vue init webpack xxx(名称)命令,不管脚手架的版本是2.x还是3.x都会按照2.x的模板构建项目,想使用3.x的模板,构建项目的时候要使用vue create xxx(名称)

  7. 先运行vue create xxx(名称) 创建项目,再运行 npm run serve (npm run build)打包项目

  8. const app = Vue.createApp({
    data() {
        return {
            message: '666'
        }
    },
    template: "

    {{message}}

    " }) app.mount("#app")

    ```javascript vue2
    var app = new Vue({
    el: '#app',
    data: {
    message: '666',
    },
    template: '<h2>{{message}}</h2>',
    });

  9. 全局变量与局部变量

    Vue.component('my-component-name', {
    // ... 选项 ...
    })
    
    var ComponentA = { /* ... */ }
    var ComponentB = { /* ... */ }
    var ComponentC = { /* ... */ }
    //然后在 components 选项中定义你想要使用的组件:
    new Vue({
    el: '#app',
    components: {
    'component-a': ComponentA,
    'component-b': ComponentB
    }
    })

99,package.json,运行npm install


##

传递给 createApp 的选项用于配置根组件。当我们挂载应用时,该组件被用作渲染的起点。

一个应用需要被挂载到一个 DOM 元素中。例如,如果你想把一个 Vue 应用挂载到 
,应该传入 #app: 与大多数应用方法不同的是,mount 不返回应用本身。相反,它返回的是根组件实例。 ![](http://www.yxqy.vip/wp-content/uploads/2021/11/20211221124347.png)![](http://www.yxqy.vip/wp-content/uploads/2021/11/201821085317585.png)

暂无评论

发布评论