![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue学习笔记
青听幸福
这个作者很懒,什么都没留下…
展开
-
6、获取表单数据
1、双向数据绑定获取表单数据双向数据绑定即MVVM,Vue就是一个MVVM的框架。M代表model,V代表view。MVVM表示model改变会影响view,view改变反过来会影响model。双向数据绑定必须在表单里面使用。v-model指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的...原创 2019-07-18 14:30:10 · 165 阅读 · 0 评论 -
10、Vue组件
一、组件可以扩展 HTML 元素,封装可重用的代码头部可以作为组件,首页和列表页使用1、新建组件<template> <div> <h2>我是头部</h2> </div></template><script> export default { name: "H...原创 2019-07-22 11:02:06 · 79 阅读 · 0 评论 -
15、Vue路由
一、什么是Vue路由动态的在组件中挂载不同的组件二、Vue路由配置1、进入项目,安装vue-router:cnpm installvue-router --save2、在main.js中引入vue-router,并Vue.use3、在main.js中配置路由①创建组件并引入组件Home.vue组件代码:<template> <...原创 2019-07-25 11:16:43 · 86 阅读 · 0 评论 -
16、不同路由传值
示例:新闻列表页→新闻详情页传值一、动态路由1、配置动态路由main.js代码及截图// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vu...原创 2019-07-29 16:51:21 · 206 阅读 · 0 评论 -
14、非父子组件传值
APP.vue根据组件引入了首页组件和新闻组件,首页组件和新闻组件可以通过事件广播的形式进行传值。1、新建js文件,引入空的Vue实例,并暴露Vue实例vueEvent.js代码:import Vue from 'vue';let VueEvent = new Vue();export default VueEvent;2、APP.vue引入首页组件和新闻组件...原创 2019-07-24 16:03:28 · 93 阅读 · 0 评论 -
4、数据绑定
打开App.vue,对代码进行修改一、文本:1、使用 {{...}}(双大括号)<template> <div id="app"> <h2>{{msg}}</h2> </div></template><script>export default { data () { ...原创 2019-07-17 15:46:27 · 122 阅读 · 0 评论 -
9、localStorage存储、模块化
localStorage(长期存储) :浏览器关闭后,数据依然会一直存在1、localStorage封装,模块化新增model----storage.js2、storage.js中localStorage封装(涉及node.js相关知识)//封装localStoragelet storage = { set(key, value) { //value需要Jso...原创 2019-07-19 16:25:07 · 220 阅读 · 0 评论 -
3、目录结构
1、在WebStrom中打开vuedemo02项目,目录结构如下:node_modules:npm 加载的项目依赖模块src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:assets: 放置一些图片,如logo等。 App.vue: 项目入口文件。 main.js: 项目的核心文件。.babelrc、.editorconfig、.giti...原创 2019-07-17 14:19:02 · 96 阅读 · 0 评论 -
13、父子组件获取值(非传值)
一、父组件获取子组件的数据和方法1、父组件调用子组件,定义ref<template> <div> <h2>首页</h2> <br/> <v-header ref="header"></v-header> </div></template><...原创 2019-07-24 11:26:38 · 108 阅读 · 0 评论 -
8、todolist示例
参考网站功能:http://www.todolist.cn/<template> <div id="app"> ToDoList <input type="text" v-model="toDo" v-on:keyup.enter="addToDo"/> <button @click="addToDo">增加<...原创 2019-07-19 14:55:23 · 634 阅读 · 0 评论 -
2、创建项目
一、进入项目:cd TestDemo\VueStudy二、创建项目注:第一次安装的Node版本比较高,卡在了“Project description”,后来把Node.js降到8.0.0,创建项目就可以了。方式一:vue init webpack 项目名(项目文件较多)方式二:vue init webpack-simple 项目名(项目文件较精简,适合中小型项目)三...原创 2019-07-17 10:36:43 · 104 阅读 · 0 评论 -
7、定义方法,执行方法
事件监听可以使用 v-on 指令,在methods中定义方法。注:v-on:click可以缩写为@click<template> <div id="app"> <button v-on:click="say">点击</button> </div></template><script>...原创 2019-07-19 14:21:54 · 127 阅读 · 0 评论 -
12、父子组件传值
一、什么是父子组件。首页组件引用头部组件,则首页组件是头部组件的父组件,头部组件是首页组件的子组件。二、父子组件传值1、父组件调用子组件的时候,绑定动态属性::title="title":传值:run="run":传方法:home="this":传组件父组件代码:<template> <div> <h2>首页&...原创 2019-07-23 16:32:40 · 69 阅读 · 0 评论 -
1、学习准备
一、Windows上安装Node.js1、下载安装包:https://nodejs.org/download/release/v8.0.0/2、安装Node.js3、查看Node.js版本:node --version4、查看npm版本:npm --version5、安装淘宝NPM镜像:npm install -g cnpm --registry=https:/...原创 2019-07-16 16:07:49 · 83 阅读 · 0 评论 -
5、条件与循环
1、条件条件判断使用 v-if 指令。<template> <div id="app"> <div v-if="flag">你能看到我吗?</div> </div></template><script> export default { data() { re...原创 2019-07-18 16:50:02 · 64 阅读 · 0 评论 -
11、Vue请求数据
Vue请求数据方式有很多种:一、官方提供vue-resource1、进入项目,安装vue-resouce:cnpminstall vue-resource --save注:--save表示将依赖写入到package.json文件中2、在main.js中引入vue-resource3、请求数据<template> <div> ...原创 2019-07-23 10:39:26 · 114 阅读 · 0 评论