Vue入门之基本语法

系列文章目录

第一章 Vue 入门之搭建vue脚手架
第二章 Vue入门之项目框架介绍
第三章 Vue入门之基本语法
第四章 Vue入门之企业站点开发实践
第五章 Vue入门之前端部署

---

文章目录 系列文章目录前言一、Vue主要文件关系图二、Vue模板文件构成1.template2.script3.style 三、vue.js基本概念四、vue.js基本语法1.Vue指令2.模板语法3.条件渲染4.列表渲染5.事件处理6.绑定表单7.组件8.过渡效果 五、路由官方文档

---

前言

vue现在是比较流行的前端框架，花一些时间学习下，特将学习过程分享出来，供大家一起学习。

---

一、Vue主要文件关系图

vue的默认页面是index.html，index中的挂载了App.vue根组件，然后所有的其他子组件（hello.vue等）都归属在App.vue这个主组件下。main.js相当于Java中的main方法，是整个项目的入口js。

App.vue 是一个vue组件，这个组件中包含三部分内容：页面模板（template），页面脚本（script），页面样式（style）

页面模板中，定义了页面的 HTML 元素，这里定义了两个，一个是一张图片，另一个是 router-view。页面脚本主要用来实现当前页面数据初始化、事件处理等等 *** 作。页面样式就是针对 template 中 HTML 元素的页面美化 *** 作。 二、Vue模板文件构成

<template>
  <div/>
template>

<script>
// 这里可以导入其他文件（组件，工具js，第三方插件js，json文件，图片文件）
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  created() {}, // 生命周期 - 创建之后
  beforeMount() {}, // 生命周期 - 挂载之前
  mounted() {}, //生命周期 - 挂载之后
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
  // 方法集合
  methods: {

  }
}

script>
<style lang='less' scoped>
//@import url(); 引入公共css类

style>

1.template

主要是构成html页面的标签。

2.script

vue通常用es6来写，用export default导出，主要包含数据data，生命周期(mounted等)，方法(methods)等。

3.style

样式通过style标签包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped.如要引入外部css文件，首先需给项目安装css-loader依赖包，打开cmd，进入项目目录，输入npm install css-loader。

安装完成后，就可以在style标签下import所需的css文件。

三、vue.js基本概念 vue.js核心

响应式数据绑定 当数据发生变化的时候，视图自动更新，即双向数据同步，原理利用了ES6中的 Object.definedProperty 中的setter/getter 代理数据，监控对数据的 *** 作。
组合的视图组件即页面最终映射为一个组件树，采用树形数据结构进行设计，方便维护，重用。

虚拟DOM

利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构称之为虚拟DOM。当数据发生变化时，能够智能的计算出重新渲染组件的最小代价并应用到DOM *** 作上。

MVVM

MVVM 是 Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对 View 和 ViewModel 的双向数据绑定，这使得 ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。 M：Model（数据层，也就是指数据（前端是js）） V：View ( 也就是指DOM层 或用户界面 ) VM ： ViewModel (处理数据和界面的中间层，也就是指Vue)

组件化应用构建
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树. 四、vue.js基本语法 1.Vue指令

v-once
这个指令让视图只渲染一次，当相应的数据发生变化，也不会重新渲染。该指令在不需要更新数据的时候使用。

v-html
这个指令主要在需要 *** 作原始HTML的时候使用。

v-bind
该指令在需要绑定HTML标签属性的时候使用。该指令有缩写:。

v-on
该指令主要用于绑定事件处理程序。该指令有缩写@。

v-show、v-if、v-else和v-else-if
这几个指令主要用于条件渲染，将在后面进行介绍。

v-for
该指令用于渲染整个列表，将在后面进行介绍。

v-model
该指令可以让页面元素和数据进行双向绑定。默认情况下数据和页面元素是单向绑定的，使用该指令可以让其变成双向绑定。该指令主要用于处理表单等场景。

2.模板语法 文本插值

<p>{{text}}p>
<p>{{text + new Date()}}p>
<script>
  new Vue({
    el: '#app',
    data: {
      text: 1
    }
  })
script>

HTML插值
要插入HTML代码需要使用v-html指令来指定，这个指令会将它所在的HTML代码块替换为要插入的HTML块.

<span v-html="showhtml">span>
<script>
  new Vue({
    el: '#app',
    data: {
      showhtml: 'hello'
    }
  })
script>

属性
如果需要设置和修改HTML属性的话，需要使用v-bind指令。

<button v-bind:disabled="disabled">禁用按钮button>
<button v-on:click='changeText'>修改文本button>
<script>
  new Vue({
    el: '#app',
    data: {
      disabled: true
    },
    methods: {
      changeText: function (event) {
        this.text += 1
      }
    }
  })
script>

计算属性
计算属性需要在构造Vue实例的时候传入computed属性，然后在相应的函数中处理复杂逻辑。计算属性有个优点就是惰性求值.也就是依赖的数据变化了才会重新计算。

<div id="s">
  <p>单词：{{words}}p>
  <p>单词大写：{{toUpper}}p>
div>
<script>
  new Vue({
    el: '#s',
    data: {
      words: 'hello'
    },
    computed: {
      toUpper: function () {
        return this.words.toUpperCase()
      }
    }
  })
script>

3.条件渲染

v-if、v-else和v-else-if这几个指令用于条件渲染，让我们可以按照条件在页面上显示和隐藏某些元素。注意v-else-if指令是Vue 2.1新增的。类似的指令还有v-show，不过v-show指令仅仅改变元素的CSS display属性，也是说隐藏的元素还是存在于页面上，仅仅是不显示而已。而v-if等元素会真正创建和销毁元素。

<div id="s">
  <h3>v-if渲染会实际创建和销毁对象h3>
  <p>分数是:<input type="text" v-model="mark"/>p>
  <p v-if="mark < 60">不及格p>
  <p v-else-if="mark <80">及格p>
  <p v-else="">优秀p>
  <h3>v-show调用CSS display属性h3>
  <button @click="toggleShow">改变showbutton>
  <p v-show="show">看到我p>
div>
<script>
new Vue({
    el: '#s',
    data: {
      mark: 80,
      show: true
    },
    methods: {
      toggleShow: function () {
        this.show = !this.show
      }
    }
  })
script>

4.列表渲染

如果需要渲染一组数据，可以使用v-for指令。v-for指令需要一个item in items块来声明迭代那些数据，这里in也可以改为of。如果需要获取迭代的索引的话，可以把迭代块声明为(item, index) in items这样的。除了迭代一个列表，也可以迭代一个对象的属性。

<div id="s">
  <h3>名字列表h3>
  <ul>
    <li v-for="name in names">{{name}}li>
  ul>

  <h3>人物表格h3>
  <table>
    <thead>
    <tr>
      <td>编号td>
      <td>姓名td>
      <td>年龄td>
    tr>
    thead>
    <tbody>
    <tr v-for="(person, index) of people" :key="index">
      <td>{{index}}td>
      <td>{{person.name}}td>
      <td>{{person.age}}td>
    tr>
    tbody>
  table>

div>
<script>
new Vue({
    el: '#s',
    data: {
      names: [
        'zhang3',
        'li4'
      ],
      people: [
        {name: 'zhang3', age: 24},
        {name: 'li4', age: 25}
      ]
    }
  })
script>

5.事件处理

v-on指令用于绑定事件处理函数，这里的函数需要在构造Vue实例的时候在methods属性中声明。

<div id="s">
  <h3>计数器h3>
  <p>
    <button @click="addCount">增加计数button>
    <em>{{count}}em>
  p>
  <h3>获取按键(单击、回车和空格)h3>
  <input type="text"
         @keyup.enter="alert('按下了回车')"
         @keyup.space="alert('按下了空格')"
         @click="alert('单击')"/>
div>
<script>
new Vue({
    el: '#s',
    data: {
      count: 0
    },
    methods: {
      addCount: function () {
        this.count++
      }
    }
  })
script>

.lazy、.number、.trim几个修饰符，作用分别是在change事件中更新、将表单输入转换为数值以及去掉表单中的前后空格。

6.绑定表单

如果要将数据和页面元素进行双向绑定，使用v-model指令。这个指令主要用于处理表单输入中。

<div id="s">
  <p>文本框：{{text}}p>
  <p>多行文本：{{textArea}}p>
  <p>单选按钮：{{radio}}p>
  <p>复选框：{{checkbox}}p>
  <p>多选框：{{select}}p>
  <hr>
  <p>文本框：<input type="text" v-model="text">p>
  <p>多行文本：<textarea v-model="textArea">textarea>p>
  <p>单选按钮：<input type="radio" v-model="radio" value="1" id="one"><label for="one">1label>
    <input type="radio" value="2" v-model="radio" id="two"><label for="two">2label>
  p>
  <p>复选框：<input type="checkbox" v-model="checkbox" id="checkbox"><label for="checkbox">复选框label>p>
  <p>多选框：<select id="select" v-model="select">
    <option value="1">1option>
    <option value="2">2option>
    <option value="3">3option>
    <option value="4">4option>
  select>
  p>
div>
<script>
new Vue({
    el: '#s',
    data: {
      text: 'text',
      textArea: 'textArea',
      radio: '',
      checkbox: '',
      select: '',
    }
  })
script>

7.组件

定义组件和定义一个Vue实例类似。不同的是，组件需要有自己的模板，而且组件的data属性必须是一个函数。原因是假如一个组件在多个地方复用，那么原本的data属性会导致所有组件实例共用一个属性值。使用函数后，每个组件实例都会有自己独立的数据。

组件定义

  let component = {
    template: '<h3>{{hello}}h3>',
    data() {
      return {
        hello: 'hello world'
      }
    }
  }

组件注册（全局注册，在全局范围中使用）

Vue.component('hello-world', {
  //实际组件
})

组件注册（局部注册）

Vue.component('hello-world', {
  //实际组件
})

new Vue({
    el: '#s',
    components: {
      'hello-world': component,
    }
  })
<hello-world>hello-world>

如果需要从父组件中传递数据，需要在子组件中声明props属性制定要传入的数据。

<div id="s">
  <h3>hello world组件</h3>
  <hello-world></hello-world>
  <h3>从父组件传递数据</h3>
  <hello-world name="zhang3"></hello-world>
  //如果需要传递动态数据，使用v-bind指令即可。
  <h3>动态传递数据</h3>
  <hello-world :name="name"></hello-world>
</div>
<script>
  let component = {
    template: '
{{hello}} {{name}}
',
    data() {
      return {
        hello: 'hello world'
      }
    },
    props: [
      'name'
    ]
  }
  let vm8 = new Vue({
    el: '#s',
    data: {
      name: 'yitian'
    },
    components: {
      'hello-world': component,
    }
  })
</script>

8.过渡效果

Vue封装了一个组件transition，当其中的组件被插入、删除，或者发生变化的时候，会自动查看这些组件是否应用了过渡CSS类，然后再恰当的时机插入和删除这些类，从而实现过渡效果。

很多第三方动画库，而且Vue允许我们自定义类名，以便和这些动画库配合使用，如Animate.css。

五、路由

这里讲下路由模式和子路由设置。
在使用Vue路由的时候，我们会发现浏览器中的地址长的是这个样子：xxx/#/。这是Vue路由的默认哈希模式，优点就是兼容性强。还有另外一种模式就是HTML历史模式。要使用这种模式很简单，在构造Vue路由的时候，将mode参数设置为history即可。这样一来，浏览器地址栏就会变成正常状态。当然这种模式也有缺点，就是假如后台没配置好，访问某些页面可能会返回404错误。所以具体使用哪种模式还需要自己仔细考虑。

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: HelloWorld
    },
  ],
  mode: 'history'
})

---

给路由加多一个子路由配置。

{
      path: '/fashion',
      name: 'fashion',
      component: Fashion,
      children: [
        {
          path: '/',
          component: Dec
        },
        {
          path: 'info',
          component: Info
        }
      ]
    }

官方文档

Web前端开发中文版
Vue.js 英文文档
Vue.js 中文文档
Vue.js 中文文档2
Vue路由
Vue的状态管理(vuex)
Eslint规则
Awesome Vue.js
element
Mint UI-基于 Vue.js 的移动端组件库
Animate.css