[前端] VUE基础 (6) (v-router插件、获取原生DOM) - 相关文章

【[前端] VUE基础 (6) (v-router插件、获取原生DOM)】的更多相关文章

[前端] VUE基础 (6) (v-router插件、获取原生DOM)

一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页签,我们选择页签显示不同的内容,但页面不跳转. 例如: 在网易云音乐的主页中,发现音乐.我的音乐.朋友这三个页签就是单页面应用.当我们切换他们时,可以观察到url的变化: 这里看到的url改变(路由改变)的路由是vue-router提供的,而不是对应django的路由系统(前后端分离的项目,djan…

获取原生DOM,diy脚手架,vue-clide使用,element-ui的使用

一.获取原生DOM的方式给标签或者属性添加ref属性 //1.添加属性 <div ref='shy'><div> <Home ref='home'></Home> //2.获取原始DOM this.$refs.shy //3.组件实例化对象 this.$refs.home 使用实例 <body> <div id="app"></div> <script src="vue.js"…

[前端] VUE基础 (9) (element-ui、axios、Vuex)

一.element-ui的使用官方网页:https://element.eleme.cn/#/zh-CN 1.安装element-ui (venv) D:\pycharm_workspace\vue_learn\leeoo>cnpm i element-ui -S √ Installed packages √ Linked latest versions √ Run scripts √ All packages installed ( packages installed from npm r…

前端Vue基础学习

Vue基础对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验 1.创建vue实例 <div id="app"></div> const vm = new Vue({ el:'app', data:{ } }) 2.插值语法  <div id="bo…

[前端] VUE基础 (5) (过滤器、生命周期、钩子函数)

一.过滤器过滤器分为局部过滤器和全局过滤器. 1.局部过滤器 <body> <div id="app"> </div> <script src="./static/vue.js"></script> <script> // 定义App let App = { data() { return { msg: 'Hello World' } }, // 使用msg的时候,使用管道符号传递给filte…

[前端] VUE基础 (8) (vue-cli脚手架)

一.安装vue-cli脚手架官方文档:https://cli.vuejs.org/zh/guide/cli-service.html Vue CLI 的包名称由 vue-cli改成了 @vue/cli . 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g或 yarn global remove vue-cli 卸载它. Vue CLI 需要Node.js 8.9 或更高版本 (推荐 8.11.0+).使用命令…

前端-Vue基础2

1.过滤器前台通过后台传值,要对后台传过来的变量进行特殊处理,比如根据id转成中文等: 1.1 局部过滤器局部过滤器只针对一个Vue实例默认将|左侧count传递给右侧方法 {{count|filterFunc}} 可以传多个参数{{count|filterFunc("test")}} func:function(value,test){ } <body> <div id="app"> {{count|change('百分比')}} {…

前端-Vue基础3（父子组件交互）

1.子组件往父组件传值点击子组件的值,子组件自增,父组件的值也跟着自增通过:this.$emit('change')方法向父组件暴露事件,在子组件中引用,可以调用父组件的方法点击子组件触发click事件,调用子组件的add方法子组件的add方法触发了父组件的事件,调用了父组件的changeAdd方法 <body> <div id="app">  <number @change="countAdd…

前端-Vue基础1

Vue核心思想:只要改变数据,页面就会发生改变 1.引入vue 1.下载vue.js 2.在script标签的src属性中,引入vue.js <script src="js/vue.js"></script> 2.vue实例 el:vue接管的div元素,注:只能接管一个div,所有需要vue处理的,必须写在这个div中 data:数据 methods:方法 new Vue({ //接管一个div el:'#app', data:{ msg:'test', co…

Vue(基础五)_vue中用ref和给dom添加事件的特殊情况

一.前言这篇文章涉及的主要内容有: 1.ref绑定在标签上是获取DOM对象 2.ref绑定在子组件上获取的是子组件对象 3.案列:自动获取input焦点二.主要内容 1.基础内容: ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件实例 (1)将ref绑定到标签上:测试之后发现在mounted()函数之后拿到的是button对象 <!DOCTYPE html>…