vue简单入门-学习笔记

安装

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

新建项目

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

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

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

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

开发时的代码主要写在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的值即可。（据说有一个前端的专业词汇叫渲染）

了解其他语法

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

v-on：用来监听DOM事件:

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

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

<template>
  <p v-if="seen">Now you see me</p>
</template>

<script>
export default {
  name: 'hello',
  data: {
    seen: true
  }
}
</script>

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' }
    ]
  }
})

posted @ 2018-09-19 22:27 sahannah 阅读(164) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

vue简单入门-学习笔记

公告