vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html

一、常用指令

v-if ... v-else:

  作用:控制元素是否显示(销毁与创建,性能与v-show要低一些)

  格式:

    <div v-if="isShow" ></div>  //isShow是定义的一个bool值(true/false)

    <div v-else></div>  //v-else要与v-if紧贴,否则无效 

v-show:

  作用:控制元素是否显示(控制DOM元素的 display 属性,性能优于 v-if)

  示例:

    <div v-show="isShow"></div> //isShow是定义的一个bool值(true/false)

v-for:循环

  作用:基于源数据多次渲染元素或模板块

  示例:

    <div v-for="item of items">{{item}}</div>  //items需要是一个可迭代的对象(数组或者对象),item of items  比 item in items 更优,建议使用 of 关键字

v-bind(具体使用方式参考Vue API中的指令相关):

  作用:绑定一个js表达式,类似单项数据绑定,可以绑定 Style样式、Class 样式类等等(当数据发生变化时会重新渲染)

  简写::

  示例:

    · 绑定 Sytle 样式

<div id='app' :style="divStyle"></div>
new Vue({
el:'#app',
data : {
divStyle : { background:red }
}
})

    

v-model:

  作用:双向数据绑定,当元素的值或者data中的值发生变化时,可以使用属性监听[watch]来做相关的处理)

  实例:

<input type='text' v-model='content'></div>

new Vue({
 el:"#app,
 watch:{
 content () {
   // 这里是属性发生变化需要处理的内容
   }
}
})

v-on:

  作用:绑定给一个事件,如:<div v-on:click="handleClick"></div>

  简写:@,如绑定一个click事件可以写为:<div @click="handleClick"></div>

  示例:

<div id="app"><div @click="handleClick"></div></div>

new Vue({
  el:"#app,
  methods:{
handleClick () {
  //这里是div触发的点击事件逻辑
  }
  }
})

  

v-html、v-text:

  作用:

    v-html:用户绑定的内容不做转换,直接输出(更新元素的 innerHTML)

    v-text:所有内容全部转换为字符串

  注意:不要使用在任何用户输入的组件中使用 v-html(如果用户输入的是html或js代码,则可能会造成XSS攻击,因为不会进行转义)

  示例:  

<div id="app"> 
  <div v-html="inhtml"></div> <!-- v-html:html会被浏览器渲染 -->
  <div v-text="inhtml"></div> <!-- v-text:直接当做字符串输出 -->
<div>

new Vue({
 el:'#app',   
data : {
inhtml:"<div style="width:20px;height:20px;background:red;"></div>"
}
})

v-once:

  作用:只渲染模板一次,用于性能优化(当模板需要重新渲染时,认为该元素为静态元素直接跳过)

  此指令无表达式:<div v-once></div> //会当做静态元素,只渲染一次

二、生命周期钩子

  1> Vue的生命周期钩子示意图

  

  2> 使用/引用格式:

html:
<div id="app"></div>

script:
var vm = new Vue({
el:"#app",
  data {},
beforeCreate () {},
created () {},
beforeMount () {},
mounted () {},
......
})

  3> 使用:keep-alive 标签后,会产生两个新的生命周期钩子

    · activated:组件被激活或重新渲染时调用(在某些需要重复加载的情况下,可以替代mounted钩子的作用)

    · deactivated:组件被移除时调用

    注意:使用该标签后,mounted执行一次后,会缓存到页面中不会在执行

三、Vue数据定义与接收 (data、prop,【计算属性、属性监听、方法定义未包含在内】)

  1. data 数据定义

    ·在Vue实例中定义data

var vm = new Vue({
el:"#app",
data : {
data1 : "test"
data2 : {
key1:'value1'
}
......
}
})

    · 在Vue的子组件中定义data

/* 注册一个全局组件:my-component-name */
Vue.components("my-component-name",{
/* 组件中定义数据,需要定义一个函数并返回一个对象 */
data () {
return {
/* 在这里定义一些数据 */
}
}
})

  2. 接收父组件传入的数据(Prop)

html:
<div id="app">
<my-component :data1="data1"></my-component>
</div> script:
父组件:
var MyComponent = {
/* {{data1}}:插值表达式 */
template : "<div>{{data1}}</div>"
//props:{ data1:String } /* 方式1:以对象的方式接收数据,并限制类型必须为String 建议方式1 */
props:[ 'data1' ] /* 方式2:以列表的方式接收数据,不限定数据类型 */
} var vm = new Vue(
el:"#app",
data : {
data1:'这是父组件传入的值'
}
/* 注册局部组件 */
components: {
MyComponent
}
)

Vue.js的指令、生命周期钩子与数据选项的更多相关文章

  1. Vue.js系列:生命周期钩子

    开发人员提供了一个Web开发人员可以在Vue.js应用程序的整个生命周期中使用的各种方法的讨论. 生命周期钩子是在Vue对象生命周期的某个阶段执行的已定义方法.从初始化开始到它被破坏时,对象都会遵循不 ...

  2. 详解Vue 实例中的生命周期钩子

    Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...

  3. Vue 实例中的生命周期钩子

    Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...

  4. 前端(二十)—— vue介绍:引用vue、vue实例、实例生命周期钩子

    vue 一.认识Vue 定义:一个构建数据驱动的 web 界面的渐进式框架 优点: 1.可以完全通过客户端浏览器渲染页面,服务器端只提供数据 2.方便构建单页面应用程序(SPA) 3.数据驱动 =&g ...

  5. 【Vue.js学习】生命周期及数据绑定

    一.生命后期 官网的图片说明: Vue的生命周期总结 var app = new Vue({ el:"#app", beforeCreate: function(){ consol ...

  6. 第5章-Vue.js交互及生命周期练习

    一.学习目标 使用网络请求进行前后端交互 (重点) 理解钩子函数的作用  (难点) 掌握Vue.js过滤器的使用方法 了解Vue.js事件的深入用法  (重点) 二.仿写留言板 2.1.实现" ...

  7. Vue.js 2.0生命周期

    1.beforeCreate 组建实例刚被创建,属性和方法等都还没有 2.created         实例已经创建完成,属性已经绑定 3.beforeMount  模板编译之前 4.mounted ...

  8. Vue 封装的组件生命周期钩子

    export default { // ... // 在组件初始化时调用,可以简单理解为页面加载时 created () { // 存在 localStorage 的缓存内容 if (localSto ...

  9. Vue.js 系列教程 3:Vue-cli,生命周期钩子

    原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...

随机推荐

  1. 【LeetCode】870. Advantage Shuffle 解题报告(Python)

    [LeetCode]870. Advantage Shuffle 解题报告(Python) 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn ...

  2. 【LeetCode】677. Map Sum Pairs 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 字典 前缀树 日期 题目地址:https://lee ...

  3. 【LeetCode】337. House Robber III 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...

  4. 破解UltraEdit64 Version 28.20.0.92 技术分享。

    本文为原创作品,转载请注明出处,作者:Chris.xisaer E-mail:69920579@qq.com QQ群3244694 补丁程序下载地址:https://download.csdn.net ...

  5. RTD2172方案|TYPEC转HDMI2.0转换器芯片|CS5265替代RTD2172

    RTD2172 USB Type-C到HDMI转换器结合了USB Type-C输入接口和数字高清多媒体接口(HDMI)输出.嵌入式微控制器(MCU)基于工业标准8051内核.接收器端口将信道配置(CC ...

  6. tcache BUUCTF gyctf_2020_signin

    Ubuntu18.04的题 用到了两个特性: 一个是 calloc 的特点:不会分配 tcache chunk 中的 chunk 另一个是 tcache 的特点:在分配 fastbin 中的 chun ...

  7. Android物联网应用程序开发(智慧城市)—— 查询购物信息界面开发

    效果: 布局代码: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xm ...

  8. Java初学者作业——编写JAVA程序,在控制台输入一位学生的英语考试成绩,根据评测规则,输出对应的成绩等级。定义方法实现学生成绩的评测功能。

    返回本章节 返回作业目录 需求说明: 编写JAVA程序,在控制台输入一位学生的英语考试成绩,根据评测规则,输出对应的成绩等级.要求:定义方法实现学生成绩的评测功能. 学生的英语考试成绩进行评测,评测规 ...

  9. golang mongodb 驱动二次封装

    mongodb 官方的go驱动包 go.mongodb.org/mongo-driver 使用起来比较繁琐,最近对其进行了二次封装 github地址:https://github.com/w3liu/ ...

  10. post请求后获取不到请求头信息的原因

    在前台获取数据时,因为没有条件,所以不用传数据,用的post请求.再添加token验证时想着前端在请求时直接添加一个请求头信息就ok 没想到后台却获取不到请求头信息,打印了下日志发现是null,这是怎 ...