30分钟学会vuejs开发页面

2018-10-19 1540 1 编辑:深正互联 来源:互联网

分五步

1.安装

2.生命周期函数

3.属性与事件绑定

4.组件之间传值

5.异步请求

学会了这五个,基本上可以开发页面了,至于其他知识点,可在开发过程中逐渐了解。

程序

1.安装(3分钟)

我这边使用官方提供的cli工具安装,设置了国内淘宝镜像,大约3分钟

node8.0.0

$ npm install --global vue-cli

$ vue init webpack my-project

多次回车

$ cd my-project

(依赖已经安装完毕,不用npm install)

$ npm run dev

打开浏览器localhost:8080就可以看见页面。


2.了解一下生命周期函数(3分钟)

在App.vue文件

写下面的代码,看看浏览器控制台

<template>

  <div>

    生命周期 {{ message }}

  </div>

</template>


<script>


export default {

  name: 'Life',

  components: {

  },

  data () {

    return {

      message: 'Hello Vue!',

    }

  },

  computed: {

  },

  methods: {


  },

  beforeCreate: function () {

    console.log('beforeCreated')

  },

  created: function () {

    console.log('created')

  },


  beforeMount () {

    console.log('beforeMounted')

  },

  mounted () {

    console.log('mounted')

  },


  beforeUpdate () {

    console.log('beforeUpdated')

  },

  updated () {

    console.log('updated')

  },


  beforeDestroy () {

    console.log('beforeDestroy')

  },

  destroyed () {

    console.log('destroyed')

  },

}

</script>


3.属性与事件绑定(10分钟)

在App.vue文件

写下面的代码,看看页面

<template>

  <div>

    属性 {{ message }}

    <button v-on:click="reverseMessage">绑定事件</button>

    <button @click="reverseMessage">绑定事件:简写</button>

    <div v-html="html"></div>

    <button v-bind:disabled="isButtonDisabled">绑定属性</button>

    <button :disabled="isButtonDisabled">绑定属性:简写</button>

    <div v-bind:id="'list-' + id">绑定id属性,通过表达式</div>

    <div class="static"

         v-bind:class="{ active: isActive }">绑定class</div>

    <div class="static"

         v-bind:class="classObject">绑定class对象</div>


    <div v-if="ok">

      <h1>v-if</h1>

      <p>Paragraph 1</p>

      <p>Paragraph 2</p>

    </div>


    <div v-if="type === 'A'">

      v-if-else A

    </div>

    <div v-else-if="type === 'B'">

      v-if-else B

    </div>

    <div v-else-if="type === 'C'">

      v-if-else C

    </div>

    <div v-else>

      Not A/B/C

    </div>


    <div>v-for list</div>

    <ul id="example-1">

      <li v-for="item in items">

        {{ item.message }}

      </li>

    </ul>


    <div>v-for object</div>

    <ul id="example-2">

      <li v-for="item in items1">

        {{ item }}

      </li>

    </ul>

    <ul id="example-3">

      <li v-for="(value, key,index) in items1">

        {{ index }}.{{ key }}: {{ value }}

      </li>

    </ul>


    <button @click="getHomeInfo('hi',$event)">事件传值</button>


    <div>阻止事件冒泡</div>

    <!-- 阻止单击事件冒泡 -->

    <a v-on:click.stop="getHomeInfo">阻止事件冒泡</a>


    <!-- Ctrl + Click -->

    <div @click.ctrl="getHomeInfo"> Ctrl + Click </div>



    <div>表单双向绑定</div>

    <input v-model="message1" placeholder="edit me">

    <p>Message1 is: {{ message1 }}</p>


    <input type="checkbox" id="checkbox" v-model="checked">

    <label for="checkbox">{{ checked }}</label>

  </div>

</template>


<script>


  export default {

    name: 'Attr',

    components: {},

    data() {

      return {

        checked:true,

        items1: {

          firstName: 'John',

          lastName: 'Doe',

          age: 30

        },

        items: [

          { message: 'Foo' },

          { message: 'Bar' }

        ],

        type:'B',

        ok:true,

        id: "id",

        classObject: {

          active: true,

          'text-danger': false

        },

        isActive: true,

        message: '测试',

        message1: '测试',

        html: '<div>直接注入html</div>',

        isButtonDisabled: true,

      }

    },

    methods: {

      getHomeInfo(mes,$event) {

        alert(mes)

        alert($event)

      },

      reverseMessage: function () {

        this.message = this.message.split('').reverse().join('')

      }

    },

  }

</script>


4.组件之间传值

在App.vue文件

写下面的代码,看看页面(10分钟)


<template>

  <div>

    组件传递 {{ message }}

    <button v-on:click="reverseMessage">逆转消息</button>

    <div>自定义组件</div>

    <child></child>

    <child></child>

    <child></child>

    <hr/>

    <div>父-->子组件传值</div>

    <child-message

      my-message="父组件传递"

      :message="messageForChild"

    ></child-message>


    <hr/>


    <div>子-->父消息传递</div>

    <div>在父组件中监听子组件发送过来的事件</div>

    <p>这个是父组件{{ total }}</p>

    <child-event

      my-message="第一个子组件"

      :message="messageForChild"

      v-on:increment="incrementTotal"

    ></child-event>

    <child-event

      my-message="第二个子组件"

      :message="messageForChild"

      v-on:increment="incrementTotal"

    ></child-event>



  </div>

</template>


<script>


  var Child = {

    template: '<div>A custom component! child' +

    '<div>' +

    '<p v-on:click="counter += 1">{{ counter }}</p>' +

    '</div>' +

    '</div>',

    data: function () {

      return {

        counter: 0

      }

    }

  }



  var ChildMessage = {

    template: '<div>' +

    '<div>' +

    '{{ message }}' +

    '</div>' +

    '<div>' +

    '{{ myMessage }}' +

    '</div>' +

    '</div>',

    props: ['message', 'myMessage'],

  }



  var ChildEvent = {

    template: '<div>' +

    '<button v-on:click="incrementCounter">{{ message }}{{ counter }}</button>' +

    '<div>' +

    '{{ myMessage }}' +

    '</div>' +

    '</div>',

    data: function () {

      return {

        counter: 0

      }

    },

    methods: {

      //在子组件定义事件然后 $emit 出自定义事件

      incrementCounter: function () {

        this.counter += 1

        this.$emit('increment')

      }

    },

    props: ['message', 'myMessage'],

  }



  export default {

    name: 'Test',

    components: {

      Child,

      ChildMessage,

      ChildEvent

    },

    data() {

      return {

        messageForChild: "父组件传递值绑定",

        message: 'Hello Vue!',

        total: 0


      }

    },

    computed: {},

    methods: {

      reverseMessage: function () {

        this.message = this.message.split('').reverse().join('')

      },

      incrementTotal: function () {

        this.total += 1

      }

    },


  }

</script>


5.异步请求(3分钟)

先安装一个异步请求模块

npm install --save axios

然后看如下代码

<template>

  <div>

    异步请求 {{ message }}

  </div>

</template>

<script>

  import axios from 'axios'

  export default {

    name: 'Ajax',

    components: {

    },

    data () {

      return {

        message: 'Hello Vue!',

      }

    },

    computed: {

    },

    methods: {

      getInfo () {

 /*

    配置文件config/index.js

    默认请求跟路径是当前host,可以设置代理

    比如:api代理目录 /static/mock

    assetsSubDirectory: 'static',

    assetsPublicPath: '/',

    proxyTable: {

     '/api': {

        target: 'http://localhost:8080',

        pathRewrite:{

          '^/api':'/static/mock'

        }

      }

    },

      

*/

      

      

        axios.get('/api/index')

          .then(this.getInfoSucc)

          .catch(this.err)

      },

      getInfoSucc (res) {

        res = res.data;

        //请求结果

        console.log(res)

        this.message = "请求结果";

      },

      err(err){

        //请求错误

        console.log(err.response)

      }

    },

    mounted () {

      this.getInfo()

    },

  }

</script>

了解了这些,记住它,然后写简单的页面,没有问题了

至于打包,尝试一下

npm run build

打包完成在dist目录下

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联
我们猜你喜欢
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

2
5