vue再学习
day01Vue 是什么?Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合使用Vue将helloworld 渲染到页面上指令本质就是自定义属性Vue中指定都是以 v- 开头 v-cloak防止页面加载时出现闪烁问题 <style ty...
2024-01-10vue学习记录
表单控件绑定 1.text控件:如果修改了text控件的值,span绑定的message会不同更新。<span>Message is: {{ message }}</span><br><input type="text" v-model="message" placeholder="edit me"> 2.checkbox控件<input type="checkbox" ><label for="checkbox">{{ checked }}</label> 多个checkbox绑定:每...
2024-01-10vue日常学习
1.$refs可以用来进行父子级间通信。ref被用于作为子组件的索引ID,用以方便的在js中直接访问子组件。用法如下parent.$refs.idname使用方法:在父级元素上加上ref属性<button @click='change'>点击</button><app-test ref='child'></app-test>methods:{ change:function(){ this.$refs.child.changehandle('父级传到子级') } } ...
2024-01-10vue学习总结
一.vue基础Vue的介绍及安装和导入Vue的使用vue事件获取当前对象Vue成员获取Vue中的循环以及修改差值表达式vue中methods,computed,filters,watch的总结Vue中组件Vue中插槽指令Vue部分编译不生效,解决Vue渲染时候会闪一下二.vue-CLIVue-CLI 搭建Vue-CLI 在pycharm中配置Vue-CLI 中相关操作Vue-CLI父子组件之间传参Vue-...
2024-01-10Vue学习
vue配置Babel 将ES6转换成浏览器能识别的ES%TypeScript js超集,vue3.0以后使用ts编写Router 路由vuexCSS Pre-processors css解析器Linter / Formatter 文本规范router路由有history与hash模式hash模式:当前浏览器访问都有#history模式:不需要#,但后端需要服务器支持项目目录结构node-model 放置依赖public 放置入口公...
2024-01-10vue 初始学习
1.vue基础 2.vue helloworld3.vue demo4.vue 开发者工具5.最终效果图:完成简单登录注册和vue 调式。相关gitlub 地址:参考github:https://github.com/kanlidy...
2024-01-10vue 继续学习
前段时间放弃,现在继续前行 1, 安装 我们看下结构! 而且还增加了一个特别牛叉的功能就是针对单个VUE文件进行测试!这个很威武啊,可见技术在不段牛叉中! 行,这都不重要,重要的是开发工具,越来越便捷!这玩意也不实用,我们还是在脚手架中方便,有自动更新功能! 好,我...
2024-01-10vue 学习资料
自学资料地址:https://zhuanlan.zhihu.com/p/26535530项目UI部分1.pc站 UI:(1)考虑自己写成本高,需要花费不少时间,好处是可以自己控制维护!(2)引入第三方的ui库利用现成的组件来做业务,可以满足你大部分场景的Pc ui库:element-UIhttp://element.eleme.io/#/zh-CN使用它开发过管理后台2.移动端UI:有赞UI vanthttp...
2024-01-10vue学习随笔01
vue中有v-if,一般v-if="true"代表要显示这个控件,v-if="false"代表不显示这个控件。比如 <input v-if="true" type="text" />v-else配合v-if来使用,一般都直接找挨得最近的v-ifv-show类似v-if,但是v-if="false"时候,你去看源码,根本看不到隐藏前的源码,而v-show="false"的话,只是在这个组件上加上了属性 display:none。隐藏...
2024-01-10重新学习vue基础
1、创建vue实例var vm = new Vue({ el: '#example', //选择元素 data: {a:1} //基本数据})2、模板语法(一)基本语法<span>Message: {{ msg }}</span> //msg双向数据绑定(二)只有第一次渲染<span v-once>这个将不会改变: {{ msg }}</span> //不会双向绑定(三)自动渲染html代码<span v-html="rawHtml"></span> ...
2024-01-10vue日常学习(2)
1.组件学习之内容分发1.1 作用域插槽父级<div class="parent"> <child> <template scope="props"> <span>hello from parent</span><br/> <span>{{ props.text }}</span><br/> <span>{{ props.text2 }}</span><br/> <span>{{ props.text3 }}</span> </template> </chil...
2024-01-10vue组件学习(二)
父传给子: 直接在组件上传,如: (冒号和不要冒号的区别,有冒号会自动转为相应的类型)在名为count的组件,父组件传了number=2的值给子组件子组件通过props:['number'] 接收;子传给父组件: 通过$emit('change',参数),change可以任意命名,向父组件暴露数据接口父组件通过监听"change"然后调用 一个方法获取到的参数和...
2024-01-10Vue学习--
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="http://unpkg.com/vue/dist/vue.js"></script></head><body><div > <pre><a v-bind:href="url">菜鸟教程</a></pre></div><!--根据js中绑定的值,在a标签中显示,并且根据js中绑定的跳转连接,显示到...
2024-01-10vue 学习注意事项
一:插值方式:1:数据绑定,最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值 <span>Message: {{ msg }}</span> 通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新2:属性绑定,属性插值使用v-bind指令,Mustache {{}}不能在 HTML 属性中使用,应使用 v-bind 指...
2024-01-10vue基本复习
冬天真冷,所以我搬家了,我搬到了一个有暖气的地方,你们也别笑我很穷,现实就这个样子经过一段时间的废弃,从新开始就需要重新复习起来!我们来看下vue的for 循环行,这篇就这么多,不要怕low ,就怕不坚持,以前我都干到了vuex vue-router 现在都忘光了,不过了,我会收拾起来!组件啊,组...
2024-01-10vue散碎知识点学习
1.1. 特点数据渲染/数据同步组件化/模块化其他功能路由,ajax,数据流1.2. Vue.js学习资源vuejs中文官网:http://cn.vuejs.orgvuejs源码:https://github.com/vuejs/vuevuejs官方工具:https://github.com/vuejs1.3. Vue实例对象var my = new Vue({ el: '#app', template: '<div>{{}}</div>', data:{ fruit: 'a...
2024-01-10vue复习(二)
一、组件介绍每一个组件都是一个vue实例每个组件均具有自身的模板template,根组件的模板就是挂载点每个组件模板只能拥有一个根标签子组件的数据具有作用域,以达到组件的复用二、局部组件<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>局部组件</title> <script type="text/java...
2024-01-10Vue 学习顺序
起步:1、扎实的 JavaScript / HTML / CSS 基本功,ES6 最好过一遍2、通读官方教程 (guide) 的基础篇。不要用任何构建工具,就只用最简单的 <script>,把教程里的例子模仿一遍,理解用法。不推荐上来就直接用 vue-cli 构建项目,尤其是如果没有 Node/Webpack 基础。3、照着官网上的示例,自己想一些类似的例子,...
2024-01-10vue学习记录③(路由)
上篇文章我们用vue-cli脚手架工具做了个简单的hello world页面,但是我们破坏了原来的流程,而正常的访问页面应该是通过路由来实现的。那么什么是路由呢?路由就是通过不同的url来访问不同的内容。下面我们就通过路由来访问不同的页面吧~~~我们用vue-cli新建个项目test1。并运行;如上图可以访问...
2024-01-10Vue基础学习备忘
内置指令 v-bindv-modelv-if/v-else/v-showv-forv-onv-textv-htmlv-elv-refv-prev-cloakv-once 过滤器 作用是对数据再次加工,例如:后台返回时间戳,vue通过过滤器进行数据格式化 拦截器常用插件 Vue-RouterVue-ResourceVue-DevTools Vue官方出品的一个Chrom俄插件,用来在Chrome开发者模式下查看Vue的实例...
2024-01-10vue学习—组件的定义注册
组件的定义注册效果:方法一: <div id="box"> <v-header></v-header> <hr /> <br /> {{name}} <hr /> <br /> <v-footer></v-footer> </div> <script> //1.定义组件 ...
2024-01-10vue学习01----安装
一、项目搭建(一共2步)1.安装前:你需要安装node,并且切换成淘宝的镜像。npm install -g cnpm --registry=https://registry.npm.taobao.org2.搭建vue项目如下: Vue.js提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建...
2024-01-10学习vue必备技能vuex
首先我们先用vue-cli搭建项目,安装vuex,安装依赖(这里不一一讲解),然后在src下建立/vuex/store.js,里面代码截图最简单的引入vue,引入vuex,定义两个对象,一个state(数据状态),一个mutations(改变数据方法),最后export,因为我们别的地方要用,比较简单的一个实例,也是比较经典的实例,点击加减改...
2024-01-10vue学习(六)异步组件加载
首先准备-----简单的框架搭出来<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>异步组件加载</title> <meta name="viewport" content="width=device-width ,initial-scale=1"> <script src="https://cdn.jsdelivr.net/npm/vue"></script></head><body><di...
2024-01-10vue的混合mixins学习
混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。 混合对象可以包含任意组件选项。 当组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。例子 新建一个 base.js 文件用于定义混合对象:// base.jsexport const mixin = { created: function () { c...
2024-01-10