Vue应用实战一篇足以

最新推荐文章于 2024-09-13 11:26:07 发布

玄妙之门

最新推荐文章于 2024-09-13 11:26:07 发布

阅读量698

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yangfenggh/article/details/121932539

版权

vue依赖下载，node.js下载：https://nodejs.org/en/
node.js安装，参考：https://blog.csdn.net/antma/article/details/86104068
npm 安装vue.js:npm install vue -g npm install 为安装命令，vue为模块名称， -g 模块放在global下
安装脚手架：npm install vue-router -g
使用vue-cli脚手架创建第一个vue：vue init webpack first-vue 等待创建完成即可,创建完成后目录结构如下：
主要关注两个文件，一个是src下main.js 一个是index.html
main.js介绍：
main.js是一个全局配置的js，打开文件可以看到在最上方通过import关键字引入了三个模块，分别为：vue、App、router

import Vue from ‘vue’ import 和from 为关键字大写Vue为变量 vue为引入模块
实例化根节点并挂载模板：

ew Vue({
  el:'#app',
  template:'<p>vue正在装载我 {{world}}}</p>',
  data:{
    world:'hello world!'
  }
})

vue组件的定义，注册以及应用（实际项目中不会这么定义，这里只是为了演示用法）
9.在main.js中添加模板，然后在根实例节点进行注册，在index.html中引用标签进行展示

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
// vue 全局组件祖册
var myHeaderChild = {
  template: '<p>I am my header child</p>'
}
var myHeader = {
  template: '<p> this is {{}} my header <my-header-child></my-header-child></p>',
  components: {
    'my-header-child': myHeaderChild
  }

}

// 实例化vue的根组件
// eslint-disable-next-line no-new
new Vue({
  el: '#app',
  // template:'<p>vue正在装载我 {{world}}}</p>',
  data: {
    world: 'hello world!'
  },
  components: {
    'my-header': myHeader
  }
})

10.在上面的代码中，定义了一个myHeader 组件，然后在vue根节点进行注册，最后在index.html中通过标签引入：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>second-vue</title>
  </head>
  <body>
    <div id="app">
      <my-header></my-header>
      hello
    </div>
  </body>
</html>