【vue学习第三天 ------ 临时笔记】的更多相关文章

vue学习第三天 ------ 临时笔记

说明:之前两天属于入门,文章可能存在片段信息 vue2.x+webpack快速搭建前端项目框架详解 http://www.jb51.net/article/129463.htmVue cli + Webpack-simple 怎么修改生产环境下运行的端口?https://segmentfault.com/q/1010000012994924 webpack和webpack-simple区别(如何引入css文件)https://www.cnblogs.com/xuange306/p/7114945…

vue学习第四天 ------ 临时笔记

1.驼峰写法 在html标签中,由于html的特性是不区分大小写(比如LI和li是一样的),因此,html标签中要传递的值要写成短横线式的(如btn-test),以区分大小写. 在props的数组中,应该和插值保持一致,写成驼峰式的(如btnTest). 例如: props: ['btnTest'], template: "<button>btn:{{btnTest}}</button>", 正确的写法: <add btn-test="h&quo…

vue学习【三】vue-router路由显示多页面

大家好,我是一叶,今天是七夕,单身狗的我还在这里写踩坑文.在这里还是要祝大家早日脱单(能不能脱单自己心里没个数吗).本篇继续踩坑,在单页面上展示多页的内容,大家的想法是什么,估计大家第一印象会是iframe框,但是iframe的缺点大过优点,在vue中也是放弃使用的.vue中引入了router的观点,从而实现单.多页面的跳转,接下来进入正文. 首先使用vue-cli脚手架搭建项目,不会的小伙伴可以查看往期文章:vue学习[番外篇]vue-cli脚手架的安装,使用vue-cli搭建好项目的话,我们…

Vue学习系列(三)——基本指令

前言 在上一篇中,我们已经对组件有了更加进一步的认识,从组件的创建构造器到组件的组成,进而到组件的使用,.从组件的基本使用.组件属性,以及自定义事件实现父子通讯和巧妙运用插槽slot分发内容,进一步的认识到组件在Vue中的核心地位. 而今天,我们将对vue中的基本指令进行了解汇总,指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM.…

VUE学习（三）语法

模板语法 Mustache 语法 1.插值 <span v-once>这个将不会改变: {{ msg }}</span> v-once,一次性,否则就会绑定 {{    }}  输出的是文本 如果想输出html   v-html   注意,你不能使用 v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎 你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击.请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值. 2.js表…

Vue学习（三）：数据绑定语法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据绑定语法</title> </head> <body> <!--1.插值--> <!--文本插值--> <h3 id="example1">{{ message }}<…

vue学习（三）完善模板页(bootstrap+AdminLTE)

1.配置index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init…

vue学习（三）组件传值

组件 官网(https://cn.vuejs.org/v2/guide/components.html) 组件分为局部组件和全局组件 局部组件:是内容中国的一部分 只是在当前组件加载的时候 全部组件:如:导航栏 侧边栏 运用到任意地方 一 局部组件 简单版 <div id="app"> <!--3. 用子--> <App></App> </div> <script> // App 组件 有 template + c…

vue学习-第三个DEMO(计算属性和监视) v-model基础用法

<div id="demo"> 姓:<input type="text" placeholder="First Name" v-model="fristname"><br> 名:<input type="text" placeholder="Last Name" v-model="lastname"><br>…

vue学习(二) 三个指令v-cloak v-text v-html

//style <style> [v-cloak]{ display:none } </style> //html <div id="app"> <p v-cloak>+++{{msg}}---<p> <p v-text="msg2">+++---</p> <div v-html="msg3"></div>//msg3的内容 标签h1会被渲…