VUE环境搭建(一)——NPM安装
摘要:VUE环境搭建——NPM安装 npm: Nodejs下的包管理器。 webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。 vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包
阅读全文
Vue(10)——Vue组件二(data选项、局部组件、组件通信)
摘要:Vue组件二——data选项、局部组件、组件通信 data选项 data选项用于储存组件数据 与实例data差别 必须存储在有返回值的函数当中 数据设置在返回值对象里 1、方式一 data:function(){ return{ title:"组件标题", content:"组件内容" } } 2、
阅读全文
Vue(九)——组件(一)基础介绍、全局注册、单向数据流
摘要:组件 基础介绍 参考:Vue 组件_哔哩哔哩 组件本质上是可复用的Vue实例,所以在内部同样有data,methods等属性 区别是:没有挂载的声明,不存在el这样的挂载选项; template——定义挂载Dom,也可以理解为设置组件结构,最终被引入根实例 注意:template定义的结构只能有一个
阅读全文
Vue(八)——表单数据双向绑定
摘要:表单双向绑定: 绑定的数据能更新表单的值 表单的值能更新所绑定的数据 通过v-model指令来实现双向绑定 v-model——监听用户的输入事件来更新数据 规则: 初始化——v-model 会忽略所有表单元素的初始值而总是将 Vue 实例的数据data作为数据来源。 关联事件—v-model 在内部
阅读全文
Vue(七)——事件处理
摘要:前情提要: v-on——监听DOM事件,在触发时运行js代码 在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法 示例: <div id="example-2"> <!-- `greet` 是在下面定义的方法名 --> <button v-on:click="gr
阅读全文
Vue(六)——条件渲染
摘要:Vue——条件渲染 v-if、v-else-if、v-else v-if 指令用于条件性地渲染一块内容,表达式的值为 true ——渲染。 false——不渲染 v-if、v-else-if、v-else可以形成判断链联用 <!-- if、else-if、else --> <div v-if="ty
阅读全文
Vue(五)—Class与style绑定
摘要:Vue—Class与style绑定 class、style都属于attribute,所以通过v-bind来绑定 针对class、style属性,v-bind可以通过对象或数组去指定 绑定Html Class 组件待续。。。 <body> <div id="app4"> <!-- 通过对象 ,要灵活配
阅读全文
Vue计算属性computed与监听器watch
摘要:Vue计算属性computed与监听器watch 诞生原因:在模板中放入太多的逻辑会让模板过重且难以维护,比如 对后台插入地数据进行切割重组 <div id="example"> {{ message.split('').reverse().join('') }} </div> 对后台时间数据,格式
阅读全文
Vue模板语法——文本插值、指令、缩写
摘要:Vue模板语法——文本插值、指令、缩写 插值 文本({{}}、v-text) 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本,双大括号会将数据解释为普通文本,或者采用v-text标签 <span id = "app">Message: {{ msg }}</span> j
阅读全文
Vue——生命周期
摘要:Vue——生命周期 实体创建周期中自带的方法 beforeCreate——在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 created——在实例创建完成后被立即调用,实例已完成以下的配置:数据观测 (data observer),属
阅读全文
Vue—响应式更改、Dom属性值绑定、Vue实例方法声明
摘要:Vue—响应式更改、Dom属性值绑定、Vue实例方法声明 响应式更改 当一个Vue实例被创建时,实例里data对象声明的所有变量都被加入到响应式系统中。当这些变量的值发生改变时,变量赋值的视图也会产生“响应”,更新新值。 在data对象创建后,Vue实例创建前,使用Object.freeze(dat
阅读全文
Vue初体验——Hello Word
摘要:Vue文本插值 资料:来自Vue的官网 核心思想 Vue.js核心: 用简洁的模板语法 声明式地将数据渲染进 DOM 的系统 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引用Vue.js -->
阅读全文
VUE——环境搭建
摘要:VUE——环境搭建 npm: Nodejs下的包管理器。 webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。 vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依
阅读全文