美文网首页
vue 第二天

vue 第二天

作者: 皇甫贝 | 来源:发表于2019-02-19 18:12 被阅读0次

1.声明式渲染

-{{ }}表达式,里面的属性会被解析
-new Vue(参数对象)
-参数对象
-el:用选择器指定页面中的一个元素被Vue所管理,也可以理解成JS作用域的概念,用ID绑定,在这个元素点击事件中声明变量 这个变量只能在这个点击事件函数中执行解析,在外面就会报错
-data,Vue实例的数据对象。里面的属性里面的值都是响应式的
-methods存放所有的操作事件
-filters存放所有的过滤器
-computed:存放所有的计算属性也是一个函数。(计算属性值会缓存)
-watchers: 监听值改变之后触发watchers属性

指令

-V-bind:属性被称为指令。指令带有前缀v-,以表示它们是 Vue 提供的特殊属性。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。简言之,这里该指令的作用是:“将这个元素节点的 title 属性和 Vue 实例的 message 属性保持一致”
-V-if :判断
-V-else:
-V-else-if:
-V-show:和v-if一样的功能 他们的区别是v-show相当于display:none,但是不能操作template对象标签
-V-for :循环 可以迭代数组 对象 整数()
-V-on :绑定事件
-V-model:数据双向绑定、
-V-once:一次性绑定使用
-V-html:解析带有html标签的字符串

实例

-每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的
-在实例化 Vue 时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项
-每个 Vue 实例都会代理其 data 对象里所有的属性
-只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。
-声明周期钩子:
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。这就给我们提供了执行自定义逻辑的机会。

模板语法

-{{ }}

修饰符

-prevent修饰符,告诉V-on指令调用时调用。阻止事件冒泡,V-on:click.prevent="hfgb()"
-过滤器 {{2*3 | hfgb}}管道符

-缩写方式

-V-bind:href ->:href
-V-on:click ->@click=" "

计算属性

-值会缓存
class 和 style绑定
-数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串。
-数组
-对象

列表渲染

小结:

-Vue实例的data属性:存放所有的可响应式的数据
-Vue实例中的methods属性(或者方法),存放所有的操作事件
-template标签在html文档流中解析不可见

相关文章

  • vue框架视频学习第二天笔记

    vue视频学习第二天笔记 复习 vue单文件方式 xxx.vue格式:template script style(...

  • vue

    vue介绍 第一天 第二天 第三天---第八天 Vue的基本概念 Vue是什么? Vue能做什么? 如何学习? 作...

  • Vue基础第二天

    Vue第二天复习 v-model(如果checkbox,select多选是数组,提供一个value属性)(radi...

  • vue 第二天

    1.声明式渲染 -{{ }}表达式,里面的属性会被解析-new Vue(参数对象)-参数对象-el:用选择器指定页...

  • Vue第二天

    一、V-model双向数据绑定 1.用于表单元素html: js: 二、V-on clickhtml: js: 三...

  • Vue 第二天

    第二天

  • Days09 Vue.js2

    前言 学习vue第二天,之前关于router和option模糊的很,跟着视频完成一个小demo以后感觉很nice。...

  • vue 学习第二天

    手动配置

  • vue第二天总结

    一,v-model v-model:双向数据绑定 用于表单元素 二,v-on:绑定事件 v-on:事件名="函数名...

  • vue第二天总结

    一,v-model v-model:双向数据绑定 用于表单元素 {{msg}} new Vue({el:"...

网友评论

      本文标题:vue 第二天

      本文链接:https://www.haomeiwen.com/subject/jtiwvftx.html