vue 新手总结

Vue 常用命令

npm

• npm init 生成一个package.json文件
• 进入包含package.json的目录中，npm install下载该项目需要的库

install

• npm install -g xxx 在全局下载xxx
• npm install –save(-s) 表示本地安装，会被加至dependencies部分，即开发环境
• npm install –save-dev(-D) 表示本地安装，会被加至devDependencies部分，即生产环境

调用webpack打包器

• 打包：npm run build
• 运行：npm run dev
• 如果有webpack.config.js可以webpack打包

vue

vue-cli

3.0以前

• 也可以init webpack vuedemo 创建项目，使用npm run dev启动

3.0以后

• 先cd到要创建的目录中，vue create firstdemo npm run serve
• vue ui 在UI界面创建，在浏览器启动npm run serve
• 关于3.0vue的配置

node

• node xxx(.js) 运行js

copy网上代码常用命令

1. 先下载解压
2. 然后在目录下使用cnpm install下载依赖
3. 然后npm run dev运行

项目相关

• 在script可以定义标签

  <template>
    <div id="app">
        //add-blog是addBlog中的name
        <add-blog></add-blog>
    </div>
  </template>
  
  <script>
  import AddBlog from './views/addBlog'
  export default {
    name: 'App',
    components: {
      AddBlog
    }
  }
  </script>
  

• main.js是总入口，从这引入依赖可以有全局作用

语法相关

• v-bind和v-model的区别

  • v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。
  • v-bind常用在css样式，数组，连接当中，是单向绑定

• props

  a.vue:
  {{title}}
  props:{title}
  
  b.js
  <a :title="title"></a>