青听幸福-优快云博客

原创 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 263

原创 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 146

原创 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 145

原创 13、父子组件获取值（非传值）

一、父组件获取子组件的数据和方法1、父组件调用子组件，定义ref<template> <div> <h2>首页</h2> <br/> <v-header ref="header"></v-header> </div></template>&lt...

2019-07-24 11:26:38 165

原创 12、父子组件传值

一、什么是父子组件。首页组件引用头部组件，则首页组件是头部组件的父组件，头部组件是首页组件的子组件。二、父子组件传值1、父组件调用子组件的时候，绑定动态属性：:title="title"：传值:run="run"：传方法:home="this"：传组件父组件代码：<template> <div> <h2>首页&...

2019-07-23 16:32:40 122

原创 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 179

原创 10、Vue组件

一、组件可以扩展 HTML 元素，封装可重用的代码头部可以作为组件，首页和列表页使用1、新建组件<template> <div> <h2>我是头部</h2> </div></template><script> export default { name: "H...

2019-07-22 11:02:06 124

原创 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 292

原创 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">增加&lt...

2019-07-19 14:55:23 709

原创 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 175

原创 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 109

原创 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 237

原创 4、数据绑定

打开App.vue，对代码进行修改一、文本：1、使用 {{...}}（双大括号）<template> <div id="app"> <h2>{{msg}}</h2> </div></template><script>export default { data () { ...

2019-07-17 15:46:27 237

原创 3、目录结构

1、在WebStrom中打开vuedemo02项目，目录结构如下：node_modules：npm 加载的项目依赖模块src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。 App.vue: 项目入口文件。 main.js: 项目的核心文件。.babelrc、.editorconfig、.giti...

2019-07-17 14:19:02 145

原创 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 148

原创 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 132

青听幸福