vue简单入门-学习笔记

• 安装

1. 安装node.js；
2. 安装全局vue-cli脚手架,用于帮助搭建所需的模板框架：npm install -g vue-cli；
3. 安装完成后可以直接在cmd中输入vue查看是否出现信息，若出现则安装成功。

• 新建项目

1. 在命令窗口输入vue init webpack first-project(项目文件夹名)，稍等一会...；
2. 根据提示确定项目名称、项目描述、作者信息等，router那里选y，后面的选n就好了；
3. 完成后，命令窗口会给出start项目的提示，安装依赖等，照做就好。

4. promote:~ zhanghan$ vue init webpack first-project
   
   ? Project name first-project
   ? Project description A Vue.js project
   ? Author zhanghan
   ? Vue build standalone
   ? Install vue-router? Yes
   ? Use ESLint to lint your code? No
   ? Set up unit tests No
   ? Setup e2e tests with Nightwatch? No
   ? Should we run `npm install` for you after the project has been created? (recom
   mended) no
   
      vue-cli · Generated "first-project".
   
   # Project initialization finished!
   # ========================
   
   To get started:
   
     cd first-project
     npm install (or if using yarn: yarn)
     npm run dev
     

5. npm run dev之后就会出现项目运行的地址，在浏览器打开就会看到如下界面，这样项目就创建成功：

• 目录解析

1. build ：编译项目的配置文件目录
   config：配置文件目录
   src：项目的主要代码目录
   static：静态资源
   
   

2. 开发时的代码主要写在src里：

   App.vue
   components: HelloWorld.vue  ：放的是vue组件
   assets:logo.png
   router：index.js  ：在vue中实现路由还是相对简单的。因为我们页面中所有内容都是组件化的，我们只要把路径和组件对应起来就可以了，然后在页面中把组件渲染出来。
   main.js  :入口文件，主要是通过 new vue（）来创建vue实例。

    

• 模版语法理解

main.js

import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  components: { App },
  template: ‘<App/>‘
})

通过new vue（）创造实例，项目都是从这里启动的，新的vue实例中包含一个对象，对象中又包括几个选项：

el：el的值是vue实例挂载的目标，是和index.html中的body里的id对应的，el必须是一个已经存在的元素；

components：包含的是一些对实例可见的组建，只有components中存在的组件才能在template中用；

template：挂载在页面的模板，与上面的components中的组件名对应；

这个main.js文件的主要含义是将<APP/>这个模板挂载在元素#app上。

App.vue：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: ‘App‘
}
</script>

<style>
#app {
  font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这是一个典型的单文件组件，看了一些实践教程，发现很少直接在这里写的，都是在components目录下新建vue组件，然后组合使用，这样使每个组件都是分离的，方便书写。vue组件中包含了html、js和css样式。

HelloWorld.vue组件

这是一个组件，跟上文中的App.vue中的组成一样：其中有一些新的第一次看不懂得地方，结合慕课上的视频看懂了一些。

<h1>{{ msg }}</h1>

 data（）{return{msg:‘Welcom to your vue.js App‘}}

例如这里双花括号：{{}}是vue的一个模板语法，文本插值的意思，在<script></script>中的data中定义了一个对象，这个对象可以在template中通过{{}}来访问。如果我们需要改变页面上的显示结果，可以直接在data里面修改msg的值即可。（据说有一个前端的专业词汇叫渲染）

• 了解其他语法

1. v-once：可以实现一次性插值，在<h1 v-once>{{msg}}</h1>，这样，改变data中的值，页面结果也不会改变。{{}}中也可以写js表达式。
2. v-bind：绑定，{{}} 不能在 HTML 属性中使用。针对 HTML 属性需要使用 v-bind；对布尔值的属性也有效
3. v-on：用来监听DOM事件:

   <button v-on:click="doSomething"></button>

4. v-if:判断语句，根据判断条件的真假来决定某些事件是否发生。eg：

   <template>
     <p v-if="seen">Now you see me</p>
   </template>
   
   <script>
   export default {
     name: ‘hello‘,
     data: {
       seen: true
     }
   }
   </script>

    

5. v-for：用来绑定一个数组来渲染一个列表：必须使用item in items这样的语法形式，找到一个例子如下：

   <ul id="example-1">
     <li v-for="item in items">
       {{ item.message }}
     </li>
   </ul>
   var example1 = new Vue({
     el: ‘#example-1‘,
     data: {
       items: [
         { message: ‘Foo‘ },
         { message: ‘Bar‘ }
       ]
     }
   })

    

vue简单入门-学习笔记

原文：https://www.cnblogs.com/sahannah/p/9673381.html