Vue学习
关注
分享
扫一扫
Chueng_to
这个作者很懒，什么都没留下…
展开
-
v-if条件判断
1. v-if、v-else-if和v-else1.1 和if、else、else if效果一样<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id = "app"> <!--在标签里使用条件判断--> &...原创 2020-09-02 16:27:49 · 6810 阅读 · 0 评论 -
v-on事件监听
1.v-on绑定事件监听器（语法糖：@）基本使用的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-on</title></head><body><div id = "app"> <h2>{{counter}}</h2> <!--<bu...原创 2020-09-02 16:16:30 · 450 阅读 · 0 评论 -
计算属性
1.计算属性的基本使用，计算属性可以直接将函数当属性使用，后面不需要加()，例如代码中的方法三<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算属性</title></head><body><div id = "app"> <!—方法一：使用mustache语法之间拼接 --...原创 2020-08-15 19:27:05 · 341 阅读 · 0 评论 -
绑定属性
1 v-bind基本用法，动态绑定属性，例如a元素标签的href属性，img和video元素标签的src属性。语法糖 ‘：’<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-bind基本使用</title></head><body><div id = "app"> <a v-b...原创 2020-08-15 19:17:29 · 510 阅读 · 0 评论 -
插值操作
1.mustache语法，不仅可以直接写变量，还可以写简单的表达式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>template</title></head><body><div id = "app"> <h2>{{message}}</h2> ...原创 2020-08-15 19:09:07 · 319 阅读 · 0 评论 -
使用快捷模板
选定一段常用的代码复制 -> 打开setting设置 -> 找到Editor中的Live Templates -> 在右边找到Vue并点击＋新增 -> 将常用代码粘贴模板框中在需要用到这一段代码的地方输入 vue 按tab键补全即可前 vs后...原创 2020-08-15 18:56:33 · 191 阅读 · 0 评论 -
Vue实例传入的option对象
el: 类型：string字符串、HTMLelement HTML元素 作用：决定之后vue实例会管理哪一个DOMdata: 类型：object对象、Function函数（组件当中的data必须是个函数） 作用：vue实例对应的数据对象methods:类型：{[key:string]:Fuction}定义函数 作用：定义属于vue的一些方法，可以再其他地方调用，也可以在指令中调用...原创 2020-08-12 18:32:38 · 469 阅读 · 0 评论 -
Vue的MVVM（model、view、viewmodel）
MVVM模式：M（model）+ V（view）+ VM（viewmodel）与 MVC模式：M（model）、V（view）、C（controller）相类似MVC：用户向controller层发起请求，controller收到请求后交给model中处理再将结果返回到controller中，controller收到结果后对view进行相对应的页面渲染再反馈给用户。所有操作都在controller中进行，当用户发起大量的请求后，controller加载速度变慢，视图渲染性能降低，进而影响用户体验原创 2020-08-12 18:20:46 · 1696 阅读 · 0 评论 -
用三个例子认识Vue
例1：简单展示数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script src="../js/vue.js"></script><div id="app"> <h1>{{mes...原创 2020-08-05 19:09:20 · 205 阅读 · 0 评论 -
在IDEA中使用Vue
安装vue插件：File -> Settings…搜索vue -> 找到vue.js 下载后重启IDEA即可创建一个新项目，将下载好的vue.js复制进去大功告成原创 2020-08-05 18:54:58 · 1226 阅读 · 0 评论 -
下载Vue
方法一：打开官网 https://cn.vuejs.org 点击安装，选择开发版本 下载成功：方法二：CDN引入<!--开发环境版本，包含有帮助的命令行警告--!><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!—生产环境版本，无相关警告，@后面可跟版本号--!><script src="https://cdn....原创 2020-08-05 18:52:20 · 483 阅读 · 0 评论