随笔分类 - Vue2x
摘要：组件数据的存放 组件对象也有一个data属性(也可以有methods等属性,下面我们有用到) 只是这个data属性必须是一个函数 而且这个函数返回一个对象,对象内部保存着数据 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></
阅读全文
摘要：■刚才,我们通过语法糖简化了Vue组件的注册过程,另外还有一个地方的写法比较麻烦,就是template模块写法。 ■如果我们能将其中的HTML分离出来写,然后挂载到对应的组件上,必然结构会变得非常清晰。 ■Vue提供了两种方案来定义HTML模块内容: 使用<script>标签 使用<template
阅读全文
摘要：在前面我们看到了组件树: 组件和组件之间存在层级关系 而其中一种非常重要的关系就是父子组件的关系 我们来看通过代码如何组成的这种层级关系: 父子组件错误用法：以子标签的形式在Vue实例中使用 因为当子组件注册到父组件的components时,Vue会编译好父组件的模块 该模板的内容已经决定了父组件将
阅读全文
摘要：全局组件：可以在多个Vue的实例下使用，使用 Vue.component( 组件名称 ,构造器名称) 局部组件：只能在注册的Vue实例下使用，在Vue实例中，通过 components 属性进行局部组件的注册 <div id="app"> <cpn></cpn> </div> <div id="ap
阅读全文
摘要：一、步骤 1.1、创建组件构造器 1.2、注册组件 1.3、使用组件 二、代码使用步骤： 2.1. 调用 Vue.extend() 方法 创建组件构造器 2.2. 调用 Vue.component() 方法 注册组件 2.3. 在 Vue 实例的作用范围内使用组件 三、步骤解析 3.1 Vue.ex
阅读全文
摘要：1. 原理: v-model 其实就是一个语法糖,它的背后本质上包含两个操作: 1. v-bind绑定一个value属性 2. v-on指定给当前元素绑定input事件 也就是下面的代码 : 等同于下面的代码 <input type="text" v-model="message"> 等同于 <in
阅读全文
摘要：1. html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <div
阅读全文
摘要：/** *编程范式：命令式编程/声明式编程 *编程范式：面向对象编程（第一公民：对象）/函数式编程（第一公民：函数） **/ // const nums= [10,20,30,50,111,222,333,40,50]; // //1. 需求：取出所有小于100的数字 // let newNums
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../jquery/vue.JS"></script> </head> <body> <div id="app"> <ul> <li v
阅读全文
摘要：<!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默认行为 --> <button @click.prevent="doThis"></button> <!-- 阻止默认行为，没有表达式 --> <form @submit.pre
阅读全文
摘要：1、v-on 的基本使用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../Js/vue.min.js"></script> </head> <body> <div id="app
阅读全文
摘要：1、块级作用域 <body> <button>button1</button> <button>button2</button> <button>button3</button> <button>button4</button> <button>button5</button> <script> /
阅读全文
摘要：1、计算属性包含getter和setter方法，如下图所示，调用时不用加“（）”,但是当我们一般使用时，一般情况下不需要实现set方法，为只读属性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script
阅读全文
摘要：一、v-bind动态绑定style(对象语法) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../Js/vue.min.js"></script> <style > .liClin
阅读全文
摘要：1. 使用v-for 遍历输出 内容 2. 设置点击事件，单机li标签时，将li的索引值存放起来 3. 通过v-bind的对象调用方式进行 li 的样式更改 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <s
阅读全文
摘要：一、v-bind 用于绑定一个或者多个属性值，或者向另一个组件传递props值 ( 比如图片的链接src、网站的链接href、动态绑定一些类、样式等等 ) 下图是通过 v-bind 绑定a标签的href 和 图片的src属性 <!DOCTYPE html> <html> <head> <meta c
阅读全文
摘要：01、Mustache 简单说即 “双括号” 语法，不仅仅可以直接写变量，也可以写一些简单的表达式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../Js/vue.min.js">
阅读全文
摘要：官方定义： 渐进式“JavaScript”框架 意味着vue是一个框架 javascript框架 js开发 渐进式： a、易用 vue.js上手非常快 b、灵活 vue 生态系统强大 vue基础核心 vue基础组件 vue router vue cli vuex。。。 c、高效 vue体积小 20k
阅读全文
