Vue项目实战(博客)

安装脚手架

1. 安装node.js
2. 安装淘宝镜像npm config set registry https://registry.npm.taobao.org
3. 安装脚手架npm install -g @vue/cli

使用

1. vue create 项目名
2. 上下加空格和回车
3. 按n选择hash模式路由
4. 选Standard config
5. 都选第一个
6. 最后选n不保存模板

项目结构

C.分析Vue脚手架生成的项目结构
    node_modules:依赖包目录
    public：静态资源目录
    src：源码目录
    src/assets:资源目录
    src/components：组件目录
    src/views:视图组件目录
    src/App.vue:根组件
    src/main.js:入口js
    src/router.js:路由js
    babel.config.js:babel配置文件
    .eslintrc.js:

2.X搭建脚手架

1. npm install -g @vue/cli-init初始化
2. vue init webpack vueplay
3. 回车默认名字
4. ? Project name vueplay
   ? Project description Vue基础
   ? Author
   ? Vue build standalone
   ? Install vue-router? No
   ? Use ESLint to lint your code? No
   ? Set up unit tests No
   ? Setup e2e tests with Nightwatch? No
5. cd vueplay
6. npm run dev

main.js

• index.html —> main.js —> App.vue
• 入口文件找到main.js，执行vue实例化对象，找到app.vue。如果模板有内容，就会插入到index.html容器中。

new Vue({
  el: '#app',//对应index.html
  components: { App },
  template: '<App/>'
})

App.vue

1. 模板

• tmplate防止dom渲染
• 只能有一个根标签

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

2. 行为

• components注册，import第一部分的helloworld

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

3. 样式

<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>

CSS作用域

• scoped：sytle只在自己里面用，会加自己的作用域。

属性传值

• 可以把子组件的一部分给父组件，然后每一个子组件都可以用父组件内容了。

//父亲里
  <div id="app">
       <app-header></app-header>
       <users v-bind:users="users"></users>
       <app-footer></app-footer>
  </div>
//儿子接收有俩种方法
  name: 'users',
//   props:["users"],
  props:{
   users:{
       type:Array,
       required:true
    }
  },

传值和传引用

• 值：数字字符串布尔 string number boolean
• 引用：数组和对象 array、object。
• 引用类型一个属性变化，父亲儿子都会变化。

子像父组件传值

1. 首先点击之后，触发方法。
2. $emit表示向父亲找
3. v-on:titleChanged='updatedTitle($event)表示绑定了子组件事件
4. 执行app的methods
5. v-bind绑定的是儿子传的值，子向父组件传值

//Header
<header v-on:click='changTitle'></header>
methods:{
   changeTitle:function(){
     this.$emit('titleChanged','子向父组件传值');
   }
}

//Vue
 <app-header v-on:titleChanged='updatedTitle($event)' v-bind:title='title'></app-header>
methods:{
   updateTitle(title){
     this.title=title;
   }
}

路由：

• 安装路由：npm install vue-router --save-dev
• 重启项目：npm run dev

http请求

• 安装：npm install vue-resource --save-dev
• 启动：npm run dev
• 网站：http://jsonplaceholder.typicode.com/users
• home.vue: 请求网络的数据

 created(){
        this.$http.get("http://jsonplaceholder.typicode.com/users")
        .then((data)=>{//请求成功,成功数据传给data
            // console.log(data);
            this.users=data.body;
        })
    }