![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE学习笔记
VUE学习笔记
前端杨小白
这个作者很懒,什么都没留下…
展开
-
Vue项目环境搭建
安装node.js的运行环境 node.js下载地址点击DOWNLOADS菜单栏LTS长期维护版本【开发环境中选择 更稳定】Current:最新版 选择相应机型类型 进行傻瓜式安装cmd命令行:-node -v:显示相应版本号 node安装成功-npm -v:显示相应版本号 查看npm包管理工具是否安装成功【node的包管理工具 在安装node时内部会自动安装npm包管理...原创 2019-11-14 09:17:27 · 234 阅读 · 0 评论 -
1.VUE方法实现Hello World及隔2秒钟更改content中的内容
原生方法实现:Nuxt:快速实现Vue的服务器端渲染 WEEX:使用VUE语法编写原生APP 官网 https://cn.vuejs.org/ Vue不支持IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。 使用Vue.js实现Hello World...原创 2020-08-11 11:46:36 · 573 阅读 · 1 评论 -
2.VUE标签指令
标签指令:v-for<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>TodoList</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body>原创 2020-08-11 11:49:43 · 240 阅读 · 0 评论 -
3.VUE的MVVM设计模式
标签指令:v-for<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>TodoList</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body>原创 2020-08-11 12:01:03 · 439 阅读 · 0 评论 -
4.VUE前端组件化:全局组件及局部组件的使用
组件:一个页面由几部分组成==》组件化维护;将一个页面切分成几部分 每一个部分是一个组件【将页面上的内容单独封装】全局组件的使用【使用组件化思想修改TodoList】:props:接收从父组件传过来的参数 并在组件中使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>TodoList</title> <sc原创 2020-08-11 13:12:43 · 252 阅读 · 0 评论 -
5.VUE简单的组件间传值【父组件向子组件传值;子组件向父组件传值】
父组件向子组件传值父组件使用 子组件时通过v-bind:变量的形式将对应的值传给todo-item子组件 子组件通过props接收从父组件传来的content参数子组件向父组件传值数据在父组件中 父组件的数据决定子组件显示多少内容 删除子组件:点击子组件时将点击内容传给父组件让父组件改变list对应数据 父组件的数据改变 子组件跟着变化 子组件向父组件传值:通过$emit的方式向外触发事件 同时父组件监听该事件获取子组件传递过来的参数实现子组件向父组件传值<!DOCTYPE ..原创 2020-08-11 13:13:17 · 186 阅读 · 0 评论 -
6.VUE实例
VUE实例:当一个程序加载时会有一个入口点 newVue的VUE实例叫做一个根实例 实际上除了根实例是一个VUE实例外 VUE中的每一个组件也是一个VUE实例【在创建一个组件的时候 VUE底层也会把这个组件编译成一个VUE的实例】可以理解为一个VUE的项目是由很多小的组件组成的【组件化 每个组件就是一个VUE的实例】 也可以理解为一个VUE的项目是由很多VUE的实例拼装而成<!DOCTYPE html><html lang="en"><head> .原创 2020-08-11 13:19:48 · 287 阅读 · 0 评论 -
7.VUE实例的生命周期钩子
生命周期函数:就是VUE实例在某一个时间点会自动执行的函数 生命周期函数直接定义在VUE的实例上 并不定义在methods中newVue:创建一个VUE的实例 ==>Init Events&Lifecycle:初始化事件和生命周期相关的内容beforeCreate:当最基础的初始化【Init Events&Lifecycle】完成的时候【VUE实例部分初始化】 VUE会自动执行beforeCreate函数Init injections&reactivity:V.原创 2020-08-11 13:25:25 · 351 阅读 · 0 评论 -
8.VUE的模板语法
差值表达式:{{}}v-text指令:div中的innerText的内容变成了data中的name的数据内容 与差值表达式的功能一样也是VUE的模板语法 可以将数据变量显示在页面上 将h1标签转义输出 所以没有任何html的样式的改变v-html指令:div中的innerText的内容和name数据进行绑定PS:当VUE指令后面跟着一个值的时候 这个值不再是一个字符串 而是js表达式<!DOCTYPE html><html lang="en"><hea原创 2020-08-11 13:28:05 · 128 阅读 · 0 评论 -
9.VUE的计算属性 方法和侦听器
计算属性:computed:{};内置缓存【 fullName依赖了两个变量firstName和lastName 当fullName依赖的变量没有发生任何变化时 计算属性不会重新计算 而是直接使用上一次的计算结果】提高性能 计算属性直接通过属性名就可以使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算属性</title&原创 2020-08-11 13:33:06 · 115 阅读 · 0 评论 -
10.VUE的样式绑定
class的对象绑定:借助class以对象的形式将样式与数据进行绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>VUE的样式绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>原创 2020-08-18 17:56:09 · 134 阅读 · 2 评论 -
11.VUE中的条件渲染及列表渲染
v-if指令:控制一个模板标签是否在页面上显示 v-if后面跟着一个js表达式 这个表达式的返回值决定了div标签是否真实的挂载到页面上 通过v-if指令结合js表达式决定一个DOM元素是否在页面上展示【v-if指令变量值为false时 该元素不存在于DOM之上】v-show指令:控制一个模板标签是否在页面上显示 【v-show指令对应的js表达式为false时 该标签对应的DOM在页面上依然存在 只不过以style="display: none;"的形式挂载在页面上】在经常需要隐藏/显示一个DOM原创 2020-08-18 18:08:17 · 319 阅读 · 1 评论 -
12.VUE中的set方法
VUE中的set方法通过set方法向页面中注入数据 数据发生变化时页面也会发生变化对象中的set方法的使用Vue.set(vm.userInfo,"address3","beijing")Vue.set不仅是VUE的全局方法 也是VUE实例上的方法vm.$set(vm.userInfo,"address4","beijing")数组中的set方法的使用VUE的全局方法:Vue.set(vm.userInfo,1,"修改5") VUE实例上的方法:vm.$set(vm.use原创 2020-08-18 18:10:02 · 282 阅读 · 1 评论