全面了解Vue基础知识（实例、指令）

一、vue 应用的组成

1 - vue 实例

  • 一个vue应用由一个根实例及多个嵌套的、可选的组件树构成
<div id="app">
    {{message}}
    <todo-list/>
</div>

<script>
  // 组件
  Vue.component('todo-list', {
    data() {
      return {
        message: "this is a component"
      }
    },
    template: `
      <div>{{ this.message }}</div>
    `
  })

  // vue 根实例
  let vm = new Vue({
    el: '#app',
    data: {
      message: 'hello vue'
    }
  })
</script>

  // 渲染结果
  hello vue
	this is a component
  • 根实例：一个vue应用中只存在一个根实例，根实例的data是一个对象
  • 组件树：每一个组件都是vue的一个实例，他们接收和根实例一样的参数配置项（el属性除外），同时因为每一个组件都是vue的实例，为了避免数据污染，组件的data都必须通过一个函数返回以保证数据只在规定的组件内生效。

2 - vue中的响应式数据

  • 在vue中数据都是响应式的，即修改了数据后会自动响应到视图上，不需要手动操作dom来修改视图的显示。
  • 注意事项：
    • 如果需要将某个数据作为响应式数据，则在初始化时就需要将其写在data属性中，后续给data属性追加的对象无法进行响应式处理。
    • 冻结的对象无法进行响应式处理

3 - 生命周期

每一个vue实例都有自己的生命周期，它们从初始化 -> 更新 -> 销毁 会进行一系列的操作。同时vue也给出了每个生命周期时对应的周期钩子。

在这里插入图片描述

  • 初始化相关
    • beforeCreate：初始化事件和生命周期
    • created：初始化数据、属性、侦听器配置等，这个钩子内可以使用data
    • beforeMount：编译模板
    • mounted：完成渲染，一般会在mounted中执行一些异步请求、DOM操作（不建议）、定时器等。
  • 更新相关

说明：更新是由于当前视图依赖的数据发生改变而触发的，所以一定不能在这个钩子内修改响应数据，否则就会进行一个死循环。

  • beforeUpdate：依赖数据发生改变或使用￥forceUpdate进行强制更新触发
  • updated：更新完成
  • 销毁相关
    • beforeDestroy：移除已经添加的事件监听器，计时器等等
    • destroyed：销毁完成
  Vue.component('todo-list', {
    data() {
      return {
        message: "this is a component",
        show: true
      }
    },
    template: `
      <div>
      <button @click="hide">移除子组件</button>
      <div v-if="this.show">{{ this.message }}</div>
      </div>
    `,
    methods: {
      hide(){
        this.show = false;
      }
    },
    beforeCreate() {
      console.log("这是 beforeCreate")
    },
    created() {
      console.log("这是 created")
    },
    beforeMount() {
      console.log("这是 beforeMount")
    },
    mounted() {
      console.log('mounted')
    },
    beforeUpdate() {
      console.log('beforeUpdate')
    },
    updated() {
      console.log('updated')
    },
    beforeDestroy() {
      console.log('beforeDestroy')
    },
    destroyed() {
      console.log('destroyed')
    }
  })

二、插值模板

Mustache 语法：双大括号获取数据，主要含有以下特点：

  • 响应式数据: 当绑定的数据发生改变时，模板视图自动改变
  • 支持表达式语法：可以在双大括号内使用单个表达式
  • 不支持语句：像’var a = ‘hello’'或者含有复杂逻辑判断的语句不可以

三、内置指定

在vue中，指令是指含有 v- 的特殊属性，用于模板处理，内置指令主要分为以下几类：

1 - 基础类

  • v-bind：属性绑定，缩写为 ：
<script>
   Vue.component('todo-list', {
    data() {
      return {
        message: "this is a component",
        show: true,
        active:'red'
      }
    },
    template: `
      <div>
      <div v-if="this.show">{{ this.message }}</div>
      <div>v-bind属性</div>
      <ul>
        <li v-bind:class="active">列表1</li>
        <li v-bind:[active]="show">列表2</li>
        <li :style="{'color':'yellow'}">列表三</li>
      </ul>
      </div>
    	`
 	})
</script>

// 模板渲染结果
<ul>
   <li class="red">列表1</li> 
	 <li red="true">列表2</li>
   <li style="color: yellow;">列表三</li>
</ul>
  • v-on：事件绑定,缩写为@
    • 绑定事件：直接绑定函数名 / 绑定传参函数 / 传递当前事件对象$even / 动态绑定事件
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>
  • 事件修饰符：.stop / .prevent / .capture / .self / .once / .passive
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 等效于 -->
event.stopPropagation();

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 等效于 -->
event.preventDefault();

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
  • 键盘修饰符:.enter / .tab / .delete / .space / .esc /. up / .down / .left / .right
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
  • 系统修饰符：.ctrl / .alt / .shift / .meta
  • 鼠标按钮修饰符:.left / .right / .middle

2 - 文本处理类

  • v-text：用于更新文本内容
<span v-text="msg"></span>
<!--等效于-->
<span>{{msg}}</span>
  • v-html：更新元素的innerHTML，即按照普通的html插入，不会被编译。慎用！！！防止 xss攻击
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

3 - 逻辑判断类

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>
  • v-show：控制元素的显示与隐藏，只是修改元素的 display 属性，而不会销毁组件，含有较高的初始化开销
<h1 v-show="ok">Hello!</h1>

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

4 - 双向绑定类：

  • v-model：双向绑定元素

5 - 组件相关

  • v-slot：提供具名插槽或者接受prop插槽

6 - 其他不常用类：

  • v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能
  • v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
  • v-cloak：隐藏未编译的 Mustache 标签直到实例准备完毕。

四、绑定类名

1 - 对象语法

  • 直接在模板中写对象
// 模板绑定
<div class="static"
  		v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

// 对应的data
data: {
  isActive: true,
  hasError: false
}

// 渲染结果
<div class="static active"></div>
  • 将对象定义在data中
<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}
  • 计算属性绑定
// 模板语法
<div v-bind:class="classObject"></div>

// 计算属性
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

2 - 数组语法

  • 直接绑定数组
// 模板方式
<div v-bind:class="[activeClass, errorClass]"></div>

// 对应的data
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

// 渲染结果
<div class="active text-danger"></div>
  • 根据条件切换绑定
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
  • 在数组中使用对象绑定
<div v-bind:class="[{ active: isActive }, errorClass]"></div>

3 - 组件绑定

在组件上绑定时，如果组件上已经有class属性，则动态绑定的class会和已有的class进行合并处理，而不是完全覆盖。

// 声明一个组件
Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

// 使用上面的组件
<my-component class="baz boo"></my-component>

// 最后的渲染结果
<p class="foo bar baz boo">Hi</p>

五、绑定样式

1 - 对象绑定

  • 内联样式绑定
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

// 响应数据
data: {
  activeColor: 'red',
  fontSize: 30
}
  • 样式对象绑定
<div v-bind:style="styleObject"></div>

// 数据
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

2 - 数组绑定

<div v-bind:style="[baseStyles, overridingStyles]"></div>

// 响应数据
data:{
	baseStyles:{
		color:red
	},
	overridingStyles:{
		fontSize:"14px"
	}
}

六、基础总结

在这里插入图片描述

Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign