Vue学习笔记
doublewe
这个作者很懒,什么都没留下…
展开
-
Vue学习笔记18-路由
1.打开cmd窗口,进入要安装路由的工程下面:输入命令进行本地安装:npm install vue-router --save2.安装好之后查看工程目录:有如下标红文件则表示安装成功。3.引入依赖包:<script src="../node_modules/vue-router/dist/vue-router.js"></script>4.创建...原创 2020-01-18 13:16:00 · 127 阅读 · 0 评论 -
Vue学习笔记17-定义多组件
前言:我们把组件单独拿出来,写在其他文件夹中,然后在一个index.html中去调用它们。1.在src/js下新建login.js和register.js:目录结构:login.js里面添加登录组件的代码:const loginForm = { //组件内的template只能有一个跟标签 template: ` <div> ...原创 2020-01-18 12:08:03 · 291 阅读 · 0 评论 -
Vue学习笔记16-组件之子向父通信
前言:父向子通信,我们可以让子组件的初始值从父组件那里获取,那么子向父通信呢?其实就是让子和父做的动作一样即可1.首先我们创建Vue实例:添加方法addOne const app = new Vue({ el: "#app", data: { num: 66 }, methods: { ...原创 2020-01-17 22:55:24 · 139 阅读 · 0 评论 -
Vue学习笔记15-组件之父向子通信
前言:父组件单向向子组件传递参数。1.创建Vue实例:num为等下要传递的 const app = new Vue({ el: "#app", data: { num: 66 }, });2.添加全局组件: Vue.component("hello",{ //定义组件名称 temp...原创 2020-01-17 21:22:38 · 92 阅读 · 0 评论 -
Vue学习笔记14-全局组件和局部组件
前言:有时候,我们不希望页面的某部分代码重复地去写,造成代码冗余,所以我们是否能够把这些代码单独拿出来当作一个组件一样,当我们需要地时候直接去引用它就行。正因如此,Vue就为我们提供了全局组件和局部组件。1.全局组件:首先我们创建一个Vue实例:const app = new Vue({ el: "#app", data: { } ...原创 2020-01-17 16:06:35 · 254 阅读 · 0 评论 -
Vue学习笔记13-watch监听的使用
1.首先创建一个vue实例:watch为监听事件,里面写上方法,方法名为要监听的data数据模型里的keyconst app = new Vue({ el: "#app", //根据名称操作div,作用域只在该div data: { search: 0 }, watch:{ //监听 ...原创 2020-01-17 14:39:11 · 107 阅读 · 0 评论 -
Vue学习笔记12-computed计算属性的玩法
前言:computed是什么?computed就是跟methods类似的一个函数集。可以在里面写函数,唯一不同的是,computed里写的函数必须要有返回值,最后return的数据可以像数据模型里的数据一样去使用它。1.我们创建一个Vue实例:const app = new Vue({ el: "#app", //根据名称操作div,作用域只在该div ...原创 2020-01-17 14:21:46 · 230 阅读 · 0 评论 -
Vue学习笔记11- v-bind的玩法
前言:平时我们按钮的value是我们在标签内把它给写死的,我们有没有什么办法可以把它给盘活呢?当然是有滴,Vue内置了v-bind来灵活为value赋值。1.首先我们创建一个vue实例:我们等下就把data数据模型里面的random和button按钮的value关联起来。 const app = new Vue({ el: "#app", //根据名称操作div,...原创 2020-01-17 13:16:47 · 276 阅读 · 0 评论 -
Vue学习笔记10- v-if和v-for结合
前言:我们可以将v-for遍历出来的内容,使用v-if进行筛选。1.创建vue实例:我们等下就把坤坤给我揪出来 const app = new Vue({ el: "#app", //根据名称操作div,作用域只在该div data: { users: [ //创建数组 {n...原创 2020-01-17 10:14:36 · 211 阅读 · 0 评论 -
Vue学习笔记09- v-else-if的玩法
前言:我们使用v-if、v-else-if和v-else就可以像条件判断一样去玩这个标签。1.首先我们创建一个vue实例:这次我们使用随机数来玩这个条件语句。 const app = new Vue({ el: "#app", //根据名称操作div,作用域只在该div data: { random: 0 ...原创 2020-01-17 09:51:29 · 403 阅读 · 0 评论 -
Vue学习笔记08- v-if和v-show的区别
前言:当我们在网页上操作时候,触发某个事件,对一些标签内容进行隐藏是比较常见的,那么在Vue里面是怎么实现这个功能的呢?那就是v-if和v-show,那要怎么选择呢?我们实际演示一下。1.首先创建一个Vue实例,并加上一个布尔类型的数据:const app = new Vue({ el: "#app", //根据名称操作div,作用域只在该div dat...原创 2020-01-17 09:29:21 · 168 阅读 · 0 评论 -
Vue学习笔记07-遍历数组和对象
1.首先创建Vue实例:const app = new Vue({ el: "#app", //根据名称操作div,作用域只在该div data: { users: [ //创建数组 {name: '柳岩',sex: '女',age: 21}, {name: ...原创 2020-01-15 17:36:17 · 485 阅读 · 0 评论 -
Vue学习笔记06- v-model的使用
前言:我们知道,使用v-text和v-html可以看作是数据模型对模板的单向操作。但我们可以使用v-model可以进行双向操作绑定数据,模板也可以对数据模型进行操作。1.代码如下:创建复选框。<div id="app"> <input type="checkbox" value="Java" v-model="ary">java</in...原创 2020-01-15 16:20:26 · 217 阅读 · 0 评论 -
Vue学习笔记05-插值表达式、v-text和v-html
前言:插值表达式的格式:{{表达式}}该表达式支持js内置语法,可以调用js的内置函数(必须有返回值)。表达式必须要有返回结果,比如:1+1。像var a = 1+1这样的就不行。可以直接使用Vue实例中定义的数据模型或者函数。1.使用js内置函数示例:<html> <div id = "app"> {{999+999}} </div&...原创 2020-01-15 14:32:54 · 356 阅读 · 0 评论 -
Vue学习笔记04-钩子函数
前言:钩子函数就是Vue对象在某些特定阶段,会去自动执行的函数,如下图所示:比如,当Vue对象初始化完成后,会调用created()方法并执行。2.和data、methods同级的位置,创建函数created():<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...原创 2020-01-15 00:44:13 · 241 阅读 · 0 评论 -
Vue学习笔记03-双向绑定与点击事件
1.首先我们在已有的模板上面添加一个input标签:<input type="text" v-model="num" >这样我们在文本框里面修改num的值的时候,data数据模型里面的num的值也会随之改变。2.全部html代码如下:<!DOCTYPE html><html lang="en"><head> <meta...原创 2020-01-14 23:16:54 · 625 阅读 · 0 评论 -
Vue学习笔记02-Vue入门案例
1.cmd到项目所在的包路径下:首先初始化npm init然后会出现package name: 你的项目名字叫啥version: 版本号description: 对项目的描述entry point: ...原创 2020-01-14 01:11:29 · 263 阅读 · 0 评论 -
Vue学习笔记01-搭建node.js环境
1.首先官网:https://nodejs.org/en/download/下载好对应系统和版本的node.js,不更换安装路径的话基本点击下一步即可。下载安装好node.js后点击finish。2.打开cmd窗口:输入node -v显示node.js的版本号说明node.js安装成功。输入npm -v显示npm版本号说明自带的npm也安装成功。此处说明下:Node.js已自带npm...原创 2020-01-14 00:39:24 · 139 阅读 · 0 评论