0基础菜鸟学前端之Vue.js

  简介:0基础前端菜鸟,啃了将近半月前端VUE框架,对前端知识有了初步的了解。下面总结一下这段时间的学习心得。

文章结构

  • 前端基础
  • Vue.js简介
  • Vue.js常用指令
  • Vue.js组件
  • Vue.js之vue-router插件
  • Vue.js实战

一、前端基础

  前端发展历史和趋势

什么是前端?

前端:针对浏览器的开发,代码在浏览器运行。

后端:针对服务器的开发,代码在服务器运行。

发展历程:

前后端不分>后端MVC开发模式(前端是V)>Ajax技术诞生(异步通信,前端不再是后端的模板,可以独立得到各种数据。)>Web 2.0(动态网页,富交互,前端数据处理,前后端分离

前端 MVC 框架

前端通过 Ajax 得到数据,因此也有了处理数据的需求。

前端代码变得也需要保存数据、处理数据、生成视图,这导致了前端 MVC 框架的诞生。

MVVM 模式

 前端可以做到:

  • 读写数据
  • 视图切换
  • 用户交互

这意味这 网页其实是一个应用程序(SPA: Single-page application)。

前端框架

Angular,核心是数据的 双向绑定。

React, Facebook开发的一个前端框架。

Vue.js是近几年一个很热门的前端MVVM框架。它的基本思想与 Angular 类似,Vue 的核心库只关注视图层,但是用法更简单,而且引入了响应式编程的概念。

二、Vue.js简介

  • 解耦视图与数据
  • 可复用组件
  • 前端路由
  • 状态管理
  • 虚拟DOM

Vue.js有什么不同?

如果你学过JQuery,那么你一定对操作DOM,绑定事件等原生Javascript能力非常熟悉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom | Test</title>
</head>
<body>
    <h1>How to buy</h1>
    <p title="reminder">Don't forget to buy this stuff.</p>
        <ul id="purchase">
            <li>Apple</li>
            <li class="sale">cheese</li>
            <li class="sale important">Milk</li>
        </ul>
    <div id= "test">

    </div>
<script>
        // DOM操作
    var pur = document.getElementById("purchase");
    var li=document.getElementsByTagName("li");
    var cls=document.getElementsByClassName('sale');
   // tit.setAttribute("id","hello");
    var newElement = document.createElement("p");
    // language=HTML
    var tit=document.getElementById("test");
    tit.appendChild(newElement);
    newElement.innerHTML='<h1>新建P元素</h1>';
</script>

</body>
</html>

  而Vue.js提供MVVM模式拆分为数据与视图两部分;我们只需关系数据的操作即可。DOM的事情VuVue帮你自动搞定;如下例实现数据的绑定:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue | Test</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg" placeholder="请输入">
    <p>{{msg}}</p>
</div>
<script>
    // 实例Vue
    var vm = New Vue({
        el: '#app', // 通过el将app属性值所在元素挂载Vue实例
        data: {
            msg: 'hello vue'
        }
    })
</script>
</body>
</html>

实现过滤器例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue | Test</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--<input type="text" v-model="msg" placeholder="请输入">
    <p>{{msg}}</p>-->
    {{data | formatDate }}
</div>

<script>
    var padDate = function (value) {
        return value < 10 ? '0' + value :value;
    }
    // 实例Vue
    var vm = New Vue({
        el: '#app',
        data: {
            msg: 'hello vue',
            date: new Date()
        },
        filters: {
            formatDate: function () {
                var date = new Date(value);
            }
        },
        moubted: {
            
        },
        ...
    })
</script>
</body>
</html>

 计算属性实例:

<template>
  <div class="pageDetail">
    <h1>{{msg}}</h1>
    <p v-if="show">显示这段文本</p>
    <!--绑定元素属性,改变属性值-->
    <a v-bind:href="url">点击链接</a>
    <button type="button" v-on:click="show = false">点我隐藏文本</button>
    <!--绑定事件,监听事件,方法可以写在methods,this指向vue实例本身-->
    <button type="button" v-on:click="showText()">点我显示文本</button>
    <p>显示价格{{prices}}</p>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        msg: 'pageDetail',
        show: true,
        url: 'http://www.hundsun.com',
        imgUrl: '',
       // prices: 10,
        food: [
          {
            name: 'apple',
            price: 200
          },
          {
            name: 'banana',
            price: 200
          }
        ]
      }
    },
    components: {},
    methods: {
      showText: function () {
        return this.showf();
      },
      showf: function () {
        this.show = true;
      }
    },
    computed: {
      prices: function () {
        var prices = 0;
        for (var i = 0; i < this.food.length; i++) {
          prices += this.food[i].price;
        }
        return prices;
      //  console.log(this.food.length)
      }
    }
  }
</script>

<style scoped>
  .pageDetail {
    background-color: #fff;
  }
</style>

三、Vue常用指令

指令是vue.js最常用的一项功能,带有v-的都是其指令。下面介绍一下常用指令

  • v-bind

该指令主要用法是动态更新HTML元素上的属性;与class、style等进行绑定;

同时绑定多个样式:

<div class="static" v-bind:class="{'active': isActive, 'error': isError}">
      <p>我的属性class看可以改变</p>
</div>
<script>
  export default{
    data() {
      return {
        isActive: true,
        isError: true
  }
</script>

数组语法绑定:也即是给class绑定一个数组。

<div class="static" v-bind:class="[activeCls, errorCls]">
      <p>我的属性class看可以改变</p>
    </div>
<script>
  export default{
    data() {
      return {
        activeCls: 'active',
        errorCls: 'error'
     }
 }
}

也可以利用data, computed,methods方法来绑定。

同样可以在组将上应用。

<div class="pageDetail">   
 <date v-bind:class="[activeCls, errorCls]"></date>
</div>

import date from '@/components/date.vue';
  export default{
    data() {
    return {
    errorCls: 'error',
    activeCls: 'active'
  }
}
    components: {date}
  }
</script>
  • v-if  v-else-if      v-else

可以根据表达式的值销毁/渲染组件/元素,v-else-if 紧跟v-if ,v-else 紧跟v-if / v-else-if 。例如:

<div> 
<h1>Test v-if指令</h1>
    <p v-if="status === 1">显示v-if</p>
    <p v-else-if="status === 2">显示v-else-if</p>
    <p v-else="status === 1">显示v-else</p>
  </div>

<script>

  export default{
    data() {
      return {
        status: 2
              }
        }
   }

可以在内置的template标签内使用改指令,例如

<div>
<template v-if="type === 'name'">
      <label>用户名:</label>
      <input placeholder="用户名" key = "name=input">
    </template>
    <template v-else>
      <label>邮箱:</label>
      <input placeholder="邮箱" key = "mail=input">
    </template>
    <button @click="handleclick()">切换输入类型</button>
</div>

<script>
  export default{
    data() {
      return {
        type: 'name',
        status: 2
}
},
methods: {
      handleclick: function () {
        this.type = this.type === 'name' ? 'mail' : name;
      }
    }
}
  • v-show

 v-show改变元素的css属性的display,不可 用在template标签内;

  • v-for

当需要将一个数组遍历和枚举一个对象循环显示时,就会用到v-for,结合in 使用。例如

<ul>
        <template v-for="user in users">
          <li>{{user.name}}</li>
          <li>{{user.user_id}}</li>
        </template>
    </ul>

<script>
export default{
    data() {
      return {
        user: {
               name: 'torre',
               user_id: '200'
         }
      }
}
</script>    
  • v-on

监听HTML事件,类似于原生JavaScript的onclick指令;例如

<div>
<button @click="getUserInfoFunc">commit</button>
</div>

<script>

  export default{
methods: {
        getUserInfoFunc() {
        server.getUserInfo().then((res) => {
          console.log(typeof res.data.list);
          this.users = res.data.list;
        })
}
}
}
  • v-model

表单控件在实际应用中比较常见,如单选,多选,下拉选择,输入框等,用它们可以完成数据的录入、校验、提交,v-model指令就是用于表单类元素上双向绑定数据。例如,

<template>
    <div id="testvue">
      <p>{{msg}}我是testvue组件</p>
      <p>测试互斥按钮</p>
      <input type="radio" v-model="picked" value="html" id="html"/>
      <label for="html">html</label><br />
      <input type="radio" v-model="picked" value="vuejs" id="js"/>
      <label for="js">js</label><br />
      <input type="radio" v-model="picked" value="css" id="css"/>
      <label for="css">css</label><br />
      <p>{{picked}}</p>
    </div>
</template>

<script>
    export default {
      data() {
        return {
          msg: 'hello',
          picked: 'js'
        }
      },
      methods: {
        handdle: function () {
          this.msg = 'hello vue'
        }
      },
      components: {},
      name: 'testvue'
    }
</script>

<style scoped>

</style>

 绑定选择列表,例如

<div id="opt">

        <select v-model="selected">
          <option>html</option>
          <option value="js">javascript</option>
          <option >css</option>
        </select>
</div>

<script>
    export default {
      data() {
        return {
          msg: 'hello',
          picked: 'js',
          selected: 'html'
        }
      },
      
      components: {},
      name: 'testvue'
    }
</script>

三、Vue.js组件

对一些页面中,对于固定不变的模块,我们可以对它们进行作为 一个“母版”,然后可以在其他不同的页面中来使用组件,这样的好处是只需要改变“母版”就可以改变整个web的显示,大大增加了代码的复用。

创建组件于创建Vue实例类似,需要注册后才能使用,其中包括全局注册,局部注册。

// 全局组件,在任何组件中都可以使用
Vue.component('global', {
  template: '<div>我是全局组件o</div>'
})

// 局部组件,需要创建在Vue实例中,只能本组件内使用
<script>
    export default {
      data() {
        return {
          msg: 'hello',
          picked: 'js',
          selected: 'html'
        }
      },
      methods: {
        handdle: function () {
          this.msg = 'hello vue'
        }
      },
// template的DOM结构必须被一个元素包含,不可直接写文本。这种注册方式也可以使用嵌套。
      components: {
        'my-component': {
          template: '<div>我是组件</div>'
        }
      },
      name: 'testvue'
    }
</script>

组件引用外部组件需要import引入

<script>
import date from '@/components/date.vue';

  export default{
    data() {
      return {
        msg: 'pageMain',
        name1: '',
        id1: '',
        users: '',
        account: '',
        passWd: ''
      }
    },
    components: {
      date
    }
  }
</script>
  • 组件之props传递数据

组件不仅仅用于代码(模板内容)的复用,更重要的是组件间要进行通信,类型是字符串数组和对象。

// 全局组件
Vue.component('global', {
  props: ['message'],
  template: '<div>我是全局组件{{message}}</div>'
})
//其他组件引用global
<global message="我是全局组件" style="color:red"></global>

props中声明的数据于组件中data()函数return的数据主要区别是props的数据来自父级,而data()中的是组件自己的数据,作用域是组件本身,这两种数据都可以在template、computed和methods中使用。

 <input type="text" v-model="parentMessage"/>
      <global :message="parentMessage" style="color:red"></global>
// javascript代码
<script>
    export default {
      data() {
        return {
          msg: 'hello',
          picked: 'js',
          selected: 'html',
          parentMessage: ''
        }
      }
}
  • 动态组件
<template>
  <div id="app">
    <button @click="handleChangeView('A')">切换到A</button>
    <button @click="handleChangeView('B')">切换到B</button>
    <button @click="handleChangeView('C')">切换到C</button>
    <div id="views">
      <component :is="currentView"></component>
    </div>
  </div>
</template>

<script>
  import first from '@/views/first.vue'
export default {
  components: {
    // comA: {
    //   template: '<div>组件A</div>'
    // },
    comA: first,
    comB: {
      template: '<div>组件B</div>'
    },
    comC: {
      template: '<div>组件C</div>'
    }
  },
  data() {
    return {
      currentView: 'comA'
    }
  },
  methods: {
    handleChangeView: function (component) {
      this.currentView = 'com' + component;
    }
  },
  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;
}
  #views {
    height: 500px;
    width: 600px;
    background-color: gainsboro;
    margin: auto;
  }
</style>

 明天继续更新

参考资料:

Vue官方文档:https://cn.vuejs.org/v2/guide/index.html

ES6: http://es6.ruanyifeng.com/#docs/module

https://github.com/ruanyf/jstraining/blob/master/docs/history.md

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

JavaScript-事件委托(事件代理)

今天给自己的知识结构填个坑,再复习下JS的事件代理。 事件代理可以给JS批量生成的DOM元素添加事件,并且还可以提高效率,因为你确实不用给每个DOM节点添加事件...

222100
来自专栏守候书阁

css写作建议和性能优化小结

还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于cs...

10820
来自专栏腾讯NEXT学位

小程序iOS客户端框架——控件事件逻辑框架与控件原生化(下)

? 小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打...

21840
来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(五)touch事件的缺陷,移动端常用插件

我们在上面《页面分类》的项目中,对 tap 事件的处理使用的是 touch 事件处理的,因为如果使用 click 事件的话,总会有延时。

14920
来自专栏不止是前端

Vue:父子组件信息传递

39180
来自专栏互联网杂技

40个重要的HTML 5面试问题及答案

目录 介绍 SGML、HTML、XML和XHTML之间的关系? 什么是HTML 5? 如果我不输入<!DOCTYPE HTML>,HTML 5能工作吗? 哪些浏...

624130
来自专栏coding for love

CSS入门4-引入CSS

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

9030
来自专栏Timhbw博客

Markdown基本语法-自学收藏

2016-05-0918:27:15 发表评论 318℃热度 1.标题 2.待办事项 3.缩写定义 4. 文字格式 5.无序列表 6.有序列表 ...

334110
来自专栏ytkah

微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现

先来看看今天的整体思路: 进入分组管理页面-->点击新建分组新建 进入到未分组页面基本操作 进入到已建分组里面底部菜单栏操作-->从名片夹中添加进行操作。 ? ...

38040
来自专栏前端人人

React第三方组件5(状态管理之Redux的使用①简单使用)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件5(状态管理之Redux的使用①简...

26940

扫码关注云+社区

领取腾讯云代金券