vue | 易学教程

Vue系列学习笔记(一)模板语法

阅读更多关于 Vue系列学习笔记(一)模板语法

文章目录插值文本原始Html Attribute 使用Javascript表达式指令参数动态参数修饰符缩写插值文本数据绑定最常见的形式就是使用“Mustache”语法，即{{变量}} < div id = " app-1 " > message:{{msg}} </ div > < script > var app1 = new Vue ( { el : "#app-1" , data : { msg : "Hello World" } } ) </ script > Mustache标签会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。 < div id = " app-1 " > message:{{msg}} < p v-once > {{msg}} </ p > </ div > < script > var app1 = new Vue ( { el : "#app-1" , data : { msg : "Hello World" } } ) app1 . msg = "Hello Vue" </ script > 通过使用 v-once指令，执行一次性地插值，当数据再发生改变时， {{msg}} 不再发生变化原始Html 双大括号会将html标签解释为普通文本

vue 具名插槽

阅读更多关于 vue 具名插槽

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>插槽的基本使用预备插槽使组件更具拓展性</title> </head> <body> <div id="app">  <cpn><span>标题</span></cpn>  <cpn><span slot="middle">标题</span></cpn> </div> <template id="cpn"> <div> <slot name="left"><span>左边</span></slot> <slot name="middle"><span>中间</span></slot> <slot name="right"><span>右边</span></slot> <slot></slot> </div> </template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el : '#app', data : { message: '你好啊' }, components: { cpn:{ template : '#cpn' }

vue slot 插槽的基本使用

阅读更多关于 vue slot 插槽的基本使用

1.基本使用slot标签 2.插槽带默认值 3. 如果有多个值，同时放入到组件中进行替换时，一起作为替换元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>插槽的基本使用预备插槽使组件更具拓展性</title> </head> <body> <div id="app">                  <cpn>  <span>按钮<

vue的生命周期

阅读更多关于 vue的生命周期

vue的生命周期很重要，以前觉得会用就行，但是知其所以然能让学习事半功倍，今天详细整理了一下，重在理解记忆，明白生命周期就了解了vue的执行过程，以后用着再补充吧 vue生命周期分三个阶段 1.创建阶段（执行一次）创建实例前：beforeCreated（组件实例化刚被创建，还没实例化之前，执行一些初始化操作）创建实例后：created（这是最早拿到data和methods的钩子函数 dom还未被加载，页面还没展示，可以发起Ajax（异步）请求）挂载前：beforeMount（模板：这里是#app里的内容，1.如果是组件的话就是template里的内容，2.如果没有组件，则将外部的HTML作为模板编译（template中的模板优先级高于outer HTML的优先级））模板里的dom节点被编译成虚拟的dom（js对象）在这里已经编译成功了虚拟dom并没有渲染成真实的dom（{{msg}}））挂载后：mounted （把上述虚拟的dom变成真实的dom，并挂载在页面上，（hello world）这个时候可以拿到虚拟dom的上节点这是最早可以拿到dom节点然后进行操作的钩子函数） 2.运行阶段（当data发生变化时触发执行0次和无数次）更新前：beforeUpdate（真实的dom更新之前，这个时候数据已经发生了变化，我们能拿到变化后的数据

Vue同时触发两个动画的问题

阅读更多关于 Vue同时触发两个动画的问题

需求：一个二级菜单，点大标题就展开本栏目下的子菜单，同时收起当前展开的一级菜单，如图现在遇到的问题是，新展开和收起旧的动画总是分开进行的，网上查遍了，看了官方文档，都没找出原因，代码部分如下其中，css样式show和hide是通过控制max-height来实现高度变化，act只有一个 transition: max-height 0.8s ease; 由于我不是科班出身，现在连问题出在css还是JS都不确定，肯定前辈指导，谢谢！来源： CSDN 作者： warmbook 链接： https://blog.csdn.net/warmbook/article/details/104284195

属性，表单，条件，循环，斗篷指令及vue的项目环境

阅读更多关于属性，表单，条件，循环，斗篷指令及vue的项目环境

斗篷指令： v-cloak 避免屏幕闪烁原理： 1）属性选择器，会将v-cloak属性所在的标签隐藏 2）当vue环境加载后，会将v-clock属性解析移除，所以内容{{ num }} 就会显示出来 3)而现在vue已经准备完毕，所以用户会直接看到数值10，而不会看到页面从{{ num }}闪烁成10 <title>Title</title> <style> [v-cloak]{ display: none; } </style> <body> <div id="app" v-cloak> <button v-on:click="fn">{{ num }}</button> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:'#app', data:{ num: 10 }, methods:{ fn () { if(this.num !== 0){ this.num -= 2 }else { } } } }) </script> 属性指令： 1）语法：v-bind: 属性名=“变量” :后面不可以有空格 2）针对不同属性，使用方式有些区别自定义属性以及title这些直接赋值的，使用方式为（t是变量， o是常量）： <p class="a" style="color

vue指令（1）v-cloak

阅读更多关于 vue指令（1）v-cloak

理论知识 v-cloak指令(cloak披风、斗篷) 由于vue在解析插值表达式时，首先将插值表达式输出在浏览器，其后将插值表达式中的变量替换为具体值，用户可以看到这一过程，即存在闪动问题。原理先通过样式隐藏内容，然后在内容中给插值表达式的变量赋值，最后显示在浏览器中。用户看不到变量替换的过程，进而解决了闪动问题。实践该指令用在style标签内部。 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="vue.js"></script> <style type="text/css"> [v-cloak]{ background: red; } </style> </head> <body> <div id="app"> <div v-cloak> {{ msg }}</div> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data:{ msg:'hello world' } }) </script> </body> </html> 来源： https://www.cnblogs.com/guojuboke/p/12299460.html

vue基础（2）模板语法

阅读更多关于 vue基础（2）模板语法

理论知识前端渲染定义将数据填充到HTML标签中，这是个处理过程。首先准备数据、模板，然后经过前端渲染处理，生成静态的HTML内容。实现方式 1、原生js拼接字符串但不同人的写法不同，后期维护困难。 2、前端模板引擎（beetl）克服了方式一的缺点，但没有事件机制。 3、vue特有的模板语法克服了前两种方式缺点 vue模板语法插值表达式指令定义是vue作者基于html标签属性之上定义的标签属性，其格式为v-xxx。即约定v-xxx是vue的指令。即是属性则规定了使用位置，即在标签左尖括号的内部使用。自定义属性是相对于标准属性，标准属性指html标签的定义的属性，比如a标签的src属性等。 v-cloak指令 [] 事件绑定属性绑定样式绑定分支循环结构过程类似模板引擎beetl. 实践总结来源： https://www.cnblogs.com/guojuboke/p/12299485.html

初学vue---第一篇博客！

阅读更多关于初学vue---第一篇博客！

书写一个vue组件有以下几个主要属性： template：模板 js：逻辑 css ：样式一、模板 <template> <div id="inputBox"> <input type="text"> </div> </template>  <div id="inputBox"> <input type="text"> </div>  二、逻辑 export default { data () { return { counter: 0 } }, methods: { // 方法 }, created () { // 生命钩子 }, computed: { // 计算属性 } } // 在这里很明显js部分就是对应的原生写法内的非template部分了。 // export default这个是es6的模块写法，不懂的可以先去了解es6的模块化三、样式 <style lang="less" scoped> //你要写入的样式相关信息 </style> <!--这里的你可以使用scss（CSS扩展语言）只要安装"sass-loader"和"node-sass

vue指令（2）v-text

阅读更多关于 vue指令（2）v-text

理论知识 v-text指令向标签中输入字符串，但不存在闪动问题，等价与 v-cloak+插值表达爱式。 v-text可以取到data中的数据。实践 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="vue.js"></script> </head> <body> <div id="app"> <div v-text="msg"></div> //可以取到data中的数据 </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data:{ msg:'hello world' } }) </script> </body> </html> 来源： https://www.cnblogs.com/guojuboke/p/12299503.html

订阅 vue