vue2.x：二、vue页面开发详解

注：本文皆为本人自己实际开发中的了解所得经验，如有不对之处欢迎诸位批评指点

vue2.x 页面开发详解

Vue 是一套用于构建用户界面的渐进式框架。
本教程均基于vue2.x的版本进行编写，搭建的脚手架是使用的@vue/cli 4，编译工具使用的是webStorm

1、vue的template内容解析

其中template主要是使用html语言去编写，再结合vue语法指令来构造页面，但是要注意的是template标签中他的子元素必须也只能有一个元素标签，也就是这样的：

// 正确写法
<template>
  <div>
  	// 在这里面可以写页面代码，这里不限制标签数量
  </div>
</template>
// 错误写法
<template>
  <div>
  </div>
  <div>
  </div>
</template>

vue语法指令主要有数据绑定和指令

1. 数据绑定

在页面中数据绑定主要有：文本插值、 HTML 代码动态插入、动态绑定参数。
文本插值：就是使用“Mustache”语法 (双大括号) 的文本插值，当对应的值发生变化后页面也会相应变更

<span>Message: {{ msg }}</span>

当然也可以通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

<span v-once>这个将不会改变: {{ msg }}</span>

HTML 代码动态插入：双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令

<span v-html="rawHtml"></span>

动态绑定参数：标签中有一些属性可以使用v-bind指令进行绑定，例如：

<div v-bind:id="dynamicId"></div>
<a v-bind:src="mySrc"></a>

也可以使用简略语法进行动态绑定

<div :id="dynamicId"></div>
<a :src="mySrc"></a>

如果是在表单 input、textarea 及 select 元素上创建双向数据绑定可以用 v-model 指令进行数据绑定

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

当在input中输入值下面的页面也会动态变更

2. 指令

vue的指令通常以v-开头，如v-bind、v-model，除了上面俩个接下来介绍的主要是关于条件渲染、列表渲染和事件处理

1. 条件渲染：
   v-if、v-else-if、v-else、v-show 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
   v-if、v-else-if、v-else是根据条件决定是否渲染对应元素，如果不渲染生成的HTML代码中则没有这块元素代码

   <div v-if="Math.random() > 0.5">
     Now you see me
   </div>
   <div v-else>
     Now you don't
   </div>
   

   v-show 是根据条件决定是否显示对应元素，无论何种清况都会渲染生成代码

   <h1 v-show="ok">Hello!</h1>
   

2. 列表渲染
   我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名,也可以是{item,index} in items,其中index是数组下标
   例如：

   <ul id="example-1">
     <li v-for="item in items" :key="item.message">
       {{ item.message }}
     </li>
   </ul>
   
   data: {
       items: [
         { message: 'Foo' },
         { message: 'Bar' }
       ]
     }
   

   结果：
   

3. 事件处理
   可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码，例如：v-on:click，v-on:scroll

   <button v-on:click="greet">Greet</button>
   

   点击后触发greet方法

2、vue的script内容解析

vue页面中的script主要是用来进行实现vue实例的生成，详情及介绍：

<script>
export default {
  name: 'HelloWorld',
  props: {
    //只有当前页面是组件时才定义props，主要作用为调用当前组件的父页面或组件向当前组件传参，注意：父组件传的值不能在子组件中修改变化
    msg: String
  },
  components: {
    //加载其中组件时使用
  },
  data() {
    // vue中的数据源
    return {
      id:1
    }
  },
  beforeCreate() {
    //vue生命周期第一步只触发一次——初始化data数据源前执行
  },
  created() {
    //vue生命周期第二步只触发一次——初始化data数据源完成执行
  },
  beforeMount() {
    //vue生命周期第三步只触发一次——完成挂载元素$el的初始化，但是还未替换挂载元素,没有完成vue动态数据绑定渲染
  },
  mounted() {
    //vue生命周期第四步只触发一次——完成挂载元素$el的初始化后，挂载元素替换完成,完成了vue动态数据绑定渲染,此时页面已经正常显示
  },
  beforeUpdate() {
    //vue生命周期第四步后多次触发——页面有元素因为data数据源中参数或methods中函数导致变化元素渲染成功前执行
  },
  updated() {
    //vue生命周期第四步后多次触发——页面有元素因为data数据源中参数或methods中函数导致变化元素渲染成功后执行
  },
  beforeDestroy() {
    //vue生命周期第五步只触发一次——页面销毁前执行
  },
  deactivated() {
    //vue生命周期第六步只触发一次——页面销毁完成了
  },
  computed:{
    //计算器，可以再这里创建一个值他是根据其他值变化时动态计算而成例如：
    newId(){
      return this.id+1
    }
    // 每当data中的id变化时他也会直接变化
  },
  methods: {
    //函数必须写在methods中，也就是页面中所有要调用的事件方法都在这里完成,
  },
  watch: {
    //监听器，用于监听data、computed中参数的变化，例如
    id(value,oldvalue){
      console.log("变化后的新值：value",value,"变化前的旧值：oldvalue",oldvalue)
    }
    //如果你今天的值又是一个层次很深的元素比如一个Object或者一个Array，当你只是修改了一个他层次很深的值，监听器是监听不到的，解决办法如下：
	//    1、创建计算器，将值转成字符串在转成Object或者是Array
	//    2、上诉办法无效的话可以是用this.$set()去修改
	//    3、如果修改的参数较多，Object可以在修改完后执行这样的操作：
	//    	this.data=Object.assign({},this.data),array的话还是用上面俩个操作吧
  },
}
</script>

2、vue的style内容解析

style中主要是编写vue页面中的详细样式，就是基础的css代码，这里不加以介绍了，我这这边就是说一下上一篇中使用的Less这个Css预处理器的使用方法
示例：

<style scoped lang="less">
	.test{
		&-head{
			&:hover{
			}
		}
	}
</style>

其中&就是代表他的父级的名称就是相当于这三个css名称是这样的：test、test-head、test-head:hover，并且在元素中也要是这样的父子层级关系才能渲染样式