建立vue项目, 插件,组件,模块,vue的全家桶

vue的核心思想: 1.数据驱动视图.

　　　　　　　　2.数据的双向绑定

利用npm 搭载一个vue项目

1.下载node

node.js是一门后端语言,用于我们写服务端

(1) 点击进入中文官网https://nodejs.org/zh-cn/

(2)点击下载

(3),点击以往版本

(4)选择6.10.3版本,当然你也可以选择,别的

(5)选择下面的一个版本

2.安装时直接选择默认的路径安装就可以,防止出现意外

3.利用npm来创建vue项目

npm是node.js的包管理器.

(1)先建立一个文件夹lession

(2)在cmd中用cd 切换到lession 中, 运行 npm init 这步初始化操作

(3)这样就可以用npm安装一个插件了比如bootstrp,jquery,注意后边的--save ,意思是保存到我的package.json, npm install 这个命令下载项目的所有依赖.比如jQuery和bootsrp等

(4) 安装vue的官方命令行工具 vue-cli (又叫脚手架)

(5)查看vue提供的模板用 vue list 命令

(6)初始化模板 ,我们先用这个 webpack-simple 以后用webpack 这个模板,

用命令行为: vue init webpack-simple 02lesson 最后这个是文件夹名字 ,注意在window上运行时关于sass要选择no

(6) 切换到文件夹 cd 02lesson

(7) 下载项目所有的依赖文件 npm install

(8) 运行vue项目 npm run dev

插件

插件就是js 的一个功能

组件

组件:由功能,架构,样式组合的一个文件, 具体是什么后缀名由webpack来处理, 所有的组件的第一个首字母要大写

在.vue文件中,一个组件由三部分组成

<!--写页面标签的,-->
<template></template>


<!--写业务逻辑代码的-->
<script></script>


<!--写样式的-->
<style scoped></style> //如果你不设置scoped属性,那么这个样式会作用于所有的组件,如果设置了,仅仅作用于当前这个组件

如何关联子组件

首先在src文件夹下创建,一个Vheader.vue的子组件.

app.vue是主组件, Vheader.vue是子组件,现在要在app中关联vheader,有人问为什么要关联子组件? 因为HTML给我们提供的标签不足以满足我们的要求,这时候就需要我们自己设计标签,这就是子组件.

Vheader.vue

<template>
  <!--所有的标签要放到div里称为闭合标签,因为template表不是真正意义上的标签-->
  <div class="vheader">
    <img src="./assets/logo.png" alt=""> //不可以直接把img的路径放到data()中,然后再这里引用因为这样是加载不出来的,如果想要加载的话,需要在script中导入这个图片
  </div>
</template>
<script>
  export default {
    name:'vheader',
    data(){
      return{
//这里你也可以写属性让它渲染在标签上
}
    }
  }
</script>
<style></style>

app.vue

<template>
  <div id="app">
<h3>{{msg}}</h3>
    <ul>
      <li v-for="(item,index) in lists">
       {{index}} {{item}}
      </li>
    </ul>

<!--导入vheader标签-->
    <Vheader></Vheader>
  </div>
</template>

<script>
  //导入子组件
  import Vheader from "./Vhead.vue"
  //抛出一个对象
  export default {
    //name表示当前组件的名字
     name:"App",
    //数据属性,是一个函数
    //当前组件的数据属性
    data(){
       return{
         msg:"今天学习组件了",
         lists:["抽闲","喝酒","烫头"]
         
       }
    },
    methods:{

    },
   //关于计算属性,只要页面一加载,就会,执行这个computed属性.
    computed:{

    },
    //关联子组件必须写,在这里关联子组件
    components:{
//把子组件关联到对象中
  Vheader:Vheader
    }
  }
</script>


<style></style>

效果图:

入口文件

main.js 就是项目的入口文件,以后在前端项目中凡是看到index,main.开头的文件,一般情况下都是项目的入口文件.

//导入模块 只能用这种字符串的方式引入,import 后边是自己写的别名,大写是为了好区分,import 是es6的语法
import Vue from 'vue'
//引入组件时.要导入它的路径,有import就会有export,自己写的组件要写路径
import App from './App.vue'

new Vue({
  el: '#app',//这个在现在的这个项目没有什么用
  render: h => h(App) //箭头函数的另一种写法,render方法的作用,把组件中所有的方法和属性,都渲染到Vue这个项目中去.
})

简单做了一个makedown

vmaked.vue

<template>
  <!--所有的标签要放到div里称为闭合标签,因为template表不是真正意义上的标签-->
  <div class="mark">

    <div class="showmark" v-html="currentmarked">

    </div>
    <div class="markdown">
      <textarea v-model="msg">

      </textarea>
    </div>

  </div>
</template>
<script>
  import Marked from "marked"//导入marked
  export default {
    name: 'mark',
    data() {
      return {
        msg: "dsdss"
      }
    },
    methods: {},
    computed: {
      currentmarked() {
        return Marked(this.msg)


      }
    },
    components: {}
  }
</script>

<style scoped>
  .markdown, .showmark {
    width: 50%;
    height: 300px;
    border: 1px solid red;
    float: right;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    /*并排显示两个盒子*/
    box-sizing: border-box;
  }

  textarea {
    width: 100%;
    height: 100%;
    border: none;

  }
</style>

View Code

app.vue

<template>
  <div id="app">

    <Vheader></Vheader>
    <br>
    <Vmarked></Vmarked>
  </div>
</template>

<script>
  //导入子组件
  import Vmarked from "./Vmarked.vue"
  //抛出一个对象
  export default {
    //name表示当前组件的名字
     name:"App",
    //数据属性,是一个函数
    //当前组件的数据属性
    data(){
       return{
         
       }
    },
    methods:{

    },
    computed:{

    },
    //关联子组件必须写,在这里关联子组件
    components:{
      Vmarked:Vmarked
    }
  }
</script>


<style></style>

View Code

父组件把数据传到子组件

使用vue的一个属性就可以了,props.

要求把app.vue的data中的数据传到子组件vheader中

步骤:

1.在要传入子组件的标签中自定义绑定一个属性,跟自己要传入的数据.

2.在子组件中验证传入数据的属性

3.在子组件中就可以使用父组件中传过来的数据了

app.vue

<template>
  <div id="app">
    <!--自定义hfavs属性-->
    <Vheader :hfavs='lists' ></Vheader>
    <br>
    <Vmarked></Vmarked>
  </div>
</template>


<!--写逻辑代码的-->
<script>
  //导入子组件
  import Vheader from "./Vhead.vue"
  export default {
     name:"App",
 
    data(){
       return{
         msg:"今天学习组件了",
         lists:["抽闲","喝酒","烫头"]

       }
    },

    methods:{

    },
    computed:{

    },
    //关联子组件必须写,在这里关联子组件
    components:{
  Vheader:Vheader,
    }
  }
</script>



<!--写样式的-->
<style></style>

View Code

vheader.vue

<template>
  <!--所有的标签要放到div里称为闭合标签,因为template表不是真正意义上的标签-->
  <div class="vheader">
    <img src="./assets/logo.png" alt="">
    {{message}}
    <ul>
      <li v-for="item in hfavs">
        {{item}}
      </li>
    </ul>
  </div>
</template>
<script>

  export default {
    name:'vheader',
    data(){
      return{
        message:"今天你吃饭了没?"}
    },
      //父组件向子组件传值,一定要在子组件中,设置props属性,验证数据属性的类型,因为我们传过来的是列表,所以验证为Array
    props:{
      hfavs:Array

    },
  }
</script>
<style></style>

View Code

子组件向父组件传值

使用$emit()这个方法触发自定义事件

1.在父组件中的子组件标签中自定义一个事件

2,在子组件的button按钮中定义一个click事件, 然后再methods中使用emit()触发父组件中自定义的事件

<template>
  <!--所有的标签要放到div里称为闭合标签,因为template表不是真正意义上的标签-->
  <div class="vheader">
    <img src="./assets/logo.png" alt="">
    {{message}}
    <ul>
      <li v-for="item in hfavs">
        {{item}}
      </li>
    </ul>
    <button @click="addOneMage">增加</button>
  </div>
</template>
<script>

  export default {
    name:'vheader',
    data(){
      return{
        message:"今天你吃饭了没?"}
    },
      //父组件向子组件传值,一定要在子组件中,设置props属性,验证数据属性的类型,因为我们传过来的是列表,所以验证为Array
    props:{
      hfavs:Array

    },
    methods:{
      addOneMage(){
//        this.hfavs.push("泡妹")
        //使用$emit这个方法触发自定义事件,第一个参数为函数名的字符串,第二个参数为要传入父组件的数据
        this.$emit('addHamder',"赌博")
      }

    }
  }
</script>
<style></style>

View Code

app.vue

<!--一个组件有三部分组成-->
<!--写hml标签的,-->
<template>
  <div id="app">
    <!--自定义hfavs属性-->
    <Vheader :hfavs='lists' @addHamder="add"></Vheader>
    <br>
    <Vmarked></Vmarked>
  </div>
</template>


<!--写逻辑代码的-->
<script>
  //导入子组件
  import Vheader from "./Vhead.vue"
  import Vmarked from "./Vmarked.vue"
  //抛出一个对象
  export default {
    //name表示当前组件的名字
    name: "App",
    //数据属性,是一个函数
    //当前组件的数据属性
    data() {
      return {
        msg: "今天学习组件了",
        lists: ["抽闲", "喝酒", "烫头"]

      }
    },

    methods: {
      add(a) {
        //在这里传入参数
        this.lists.push(a)
      }
    },
    computed: {},
    //关联子组件必须写,在这里关联子组件
    components: {
      Vheader: Vheader,
      Vmarked: Vmarked
    }
  }
</script>


<!--写样式的-->
<style></style>

View Code

vue 语法基础

在这里只记录一些我认为比较重要的内容,详细情况请见

指令

指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式(v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：

<p v-if="seen">现在你看到我了</p>

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

<a v-bind:href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

v-bind v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind:你要动态变化的值="表达式"

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 缩写 -->
<img :src="imageSrc">

修饰符

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

模块

模块:一个js文件就是一个模块

vue的全家桶

vue+vue-router+vuex这三个是vue的全家桶

vue的设计模式:MVVM

vue 充当了一个V的角色,Vue-router,充当了vm的角色,vuex充当了M的角色.

vue-router

首先安装vue-router

npm install vue-router --save

1.在main.js 中引入vue-router

2. 在main.js中调用vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter);
new Vue({
  el: '#app',
  render: h => h(App)
});

3.导入组件

4.创建router实例,然后传router配置

5.把router实例挂载到vue中去

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
//导入路由组件
import Index from "./index.vue"
import Luffy from "./luffy.vue"

Vue.use(VueRouter);
//创建router实例,然后传router配置
const router =new VueRouter({
  routes:[
    {path:"/",component:Index},
    {path:"/luffy",component:Luffy,}
  ]
})
new Vue({
  el: '#app',
  //把router挂载到Vue对象中去
  router:router,
  render: h => h(App)
});

6.在app.vue 中写入router-view标签,路由的出口,所有路由匹配的组件都会被渲染到这里

7.然后在app,vue 中写入router-link标签,相当于a标签,to 属性,相当于href

template>
  <div id="app">
    <ul>
      <router-link to="/">首页</router-link>
      <router-link to="/luffy">路飞学城</router-link>
    </ul>
    <!--路由的出口,所有路由匹配的组件都会被渲染到这里-->
    <router-view></router-view>

  </div>
</template>

效果:

继续加强版

加入url多了该怎么办,这时候哦需要v-for了

app.vue

<template>
  <div id="app">
    <ul>
      <!--这里注意当给router-link加事件时,会阻止click事件的发生,需要在事件后边加一个native属性,就可以啦-->
      <router-link v-for="(item,index) in url" :to="item.href" :class="{active:currentindex==index}"
                   @click.native="getcolor(index)">{{item.name}}
      </router-link>

    </ul>
    <!--路由的出口,所有路由匹配的组件都会被渲染到这里-->
    <router-view></router-view>


  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        url: [
          {href: "/", name: "首页"},
          {href: "/luffy", name: "路飞学城"},
        ],
        currentindex: 0
      }
    },
    methods: {
      getcolor(index) {
        this.currentindex = index
      }
    }
  }
</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;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }
  
  a.active {
    color: yellow;
  }
</style>

View Code

效果图,点击标签会自动变黄

axios发送ajax请求

安装axios

#发送ajax请求需要安装axios组件
npm install axios

main.js

 import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/store'
import axios from 'axios'
Vue.prototype.$axios = axios //设置全局变量,在其他组件中就可以用this.$axios调用axios
axios.defaults.headers['Content-Type'] = "application/json" #设置请求头

Vue.config.productionTip = false

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

router.beforeEach(function (to,from,next) {

    if(to.meta.requireAuth){
      // 需要登录的路由
      if (store.state.token) {
        // 已经登录
        next()
      } else {
        // 未登录
        next({
          name: 'login',
          query:{ backurl:to.path }
        })
      }
    }else{
      // 不需要登录的路由
      next()
    }
  }
)

log.vue

  this.$axios.request({
17     url: 'http://127.0.0.1:8000/login/',
18     method: 'POST',
19     data: {
20       username: this.username,
21       password: this.password
22     },
23     responseType: 'json'
24   }).then(function (response) {
25     console.log(response.data)
26     
27     that.$router.push('/index')
28   })
29 
30 PS：重定向 that.$router.push('/index')