vue2.0学习笔记

Vue2.0学习笔记

Vue学习第一天–笔记一

这篇博客仅用来记录本人学习vue的过程以及在过程中遇到的疑难问题及解决方法

环境搭建

1.安装node.js，nodeJs官网下载最新版本安装，具体安装和环境配置参考这篇博客
2. 使用npm命令安装淘宝镜像cnpm
3. 使用淘宝镜像cnpm全局安装vue脚手架vue-cli，安装命令：cnpm install -g vue-cli
4. 使用webpack创建vue项目，首先你得安装了webpack,安装命令：cnpm install webpack -g ;创建vue项目命令：vue init webpack 项目名（如果是小白建议先不安装路由（router）等组件，只简单填写项目名称等就可以）
5. 启动vue项目，启动命令：npm run dev
6. 创建好的vue项目结构如下图所示

项目运行详解

1.项目的入口文件为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/>' //显示组件内容
})

2.App组件说明

<template>   //template等于HTML
  <div id="app">
    <p>{{demo}}</p> //使用{{}}来引用data里面的变量
      <button v-on:click="eventshow">点击切换</button> //点击调用eventshow方法
    <template v-if="seen"> //使用v-if来判断是否渲染如下代码，这边的seen为data里面的变量		
        <ol>
          <li v-for="todo in msg"> //使用v-for循环输出msg
            {{ todo }}
          </li>
         </ol>
    </template>
    <HelloWorld/> //将引入的组件中的template内容显示在这里
    <Parent/>
    <Derective/>
	<AxiosTest/>
  </div>  
</template>
<script>//这边就是js内容
import HelloWorld from './components/HelloWorld' //引入组件，HelloWorld为组件名，‘ ’中是组件路径
import Parent from './components/parent'
import Derective from './components/derective'
import AxiosTest from './components/axiosTest'
export default {
  name: 'App',
  data(){
        return{
		    demo:"我是第一个demo",
			  msg :["第一条","第二条","第三条"],
			  seen:true
		}
  },
  components: { //在这里注册组件，注意引入和注册的组件名要一致
    HelloWorld,
	  Parent,
    Derective,
	AxiosTest
  },
  methods:{ //这里是方法
	eventshow(){	   
		this.demo = "我才是第一个"
	}
  },
  
}
</script>