vue入门学习

最新推荐文章于 2024-04-11 05:37:43 发布

老三、真皮

最新推荐文章于 2024-04-11 05:37:43 发布

阅读量461

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_44139234/article/details/88082649

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、最简单的组件模板

<div id="app-7">
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

二、v-once指令
执行一次性地插值，当数据改变时，插值处的内容不会更新。
三、cnpm安装
https://npm.taobao.org/

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

四、安装
1、vue脚手架安装

npm install –global vue-cli

2、创建项目
（一般情况）

vue init webpack + 名称
cd 目录
cnpm install
npm run dev

（简单模式）

vue init webpack-simple + 名称
cd 目录
cnpm install
npm run dev

五、src目录组成
静态文件assets 组件compoents 路由router 根目录app.vue main.js
六、vue后缀文件
template script style
template里面所有内容要被一个根节点包含起来
七、标签属性上面绑定数据需要加v-bind：
绑定数据为HTML代码需要加《div v-html = ‘？’》《/div》
八、遍历数据

<div  v-for=”item  in  arr”>  {{item}}  </div>
<div  v-for=”(item,key)  in  arr”>  {{key}}  {{item}}  </div>
<div  v-for=”(item,key)  in  arr”  :class=”{‘red’:key == 0}”>  {{key}}  {{item}}  </div>

九、数据双向绑定v-model
（数据model改变影响视图，视图改变反过来影响model）

十、获取DOM节点

this.$refs.user

十一、事件
点击事件v-on:click=’go()’
@click=’go()’
传值 v-on:click= “go(‘111’)”
data-id = ‘123’ v-on:click= “go( $e v e n t) ” （通过 e . s r c E l e m e n t . d a t a s e t . i d 获取）键盘事件 < i n p u t t y p e =^{'} t e x t^{'} @ k e y d o w n =^{'} g e t 1 ($ event)’/>（键盘弹起）
e. keyCode = 13 （回车键）

十二、缓存

 localStorage.setItem('aaa',JSON.stringify(this.storage1))
    localStorage.getItem('aaa')

十四、模块化文件
建立目录public，新建storage .js文件，定义storage变量，暴露变量

var storage = {
	set(key,value){
		localStorage.setItem(key,JSON.stringify(value))
	},
}
export default storage;

在使用该模块的文件先引入
import storage from './storage/storage.js';（‘./’代表当前文件目录）
import storage from '@/storage/storage.js';（@代表src目录）

十五、组件定义样式，防止样式重名冲突
1、当前子组件组件局部作用域，设置scoped

<style  lang=”scss”  scoped>
</style>

2、在根节点标签起名字，如id=“name”

<style  lang=”scss”  scoped>
#name{
	h2{ }
}
</style>

十六、请求数据
1、使用vue-resource请求
（1）需要安装vue-resource模块，

cnpm  install  vue-resource  -save

（2）main.js引入vue-resource，

import  VueResource  from  ‘vue-resource’

（3）vue使用模块
Vue.use(VueResource)
（4）定义函数，发起请求

this.$http.get(‘/api’).then(function(){
		console.log(‘成功’)
},function(){
	console.log(‘失败’)
})

2、使用axios请求
（1）安装
npm install axios -save
（2）哪里用哪里引入axios

import axios from ‘axios’;
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });

3、使用fetch-jsonp请求
十七、配置路由

import Vue from 'vue'
import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
mode: 'history', // 将默认的hash模式变为history模式
  routes: [{ path: '/',  name: 'HelloWorld', component: HelloWorld },
    	{ path: '*',  redirect: '/home' }  /*默认跳转路由*/
  ]
})

5 、根组件的模板里面放上这句话

<router-view></router-view>

6、路由跳转
（1）标签跳转

<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>

（2）通过js函数跳转

this.$router.push(  {path: '/'content'/123'}  )
this.$router.push(  name: 'Content', params: { id: '123' }   )

十八、动态路由传值
1、在router-link标签里面传值

<router-link :to="'/content/' + item">{{key}} -- {{item}}</router-link>

2、在路由配置项

{  path: '/content/:id',  name: 'Content',  component: Content  },

3、在下个页面里获取

mounted(){  console.log(this.$route.params)  }

十九、路由get方式传值
1、在router-link标签里面传值

<router-link :to="'/goods?con=' + item">{{key}} -- {{item}}</router-link>

2、在下个页面里直接获取

mounted(){  console.log(this.$route.query)  }

二十、路由的嵌套
1、配置路由，加上一个children参数，

{
  path: '/user', name: 'User', component: User,
  children: [
    { path: 'yi', name: 'Yi', component: Yi, }, ] 
},

2、在父路由显示子路由的地方加上

<router-view/>

3、在跳转路由的地方使用

<router-link to="/user/yi">用户111</router-link>

二十一、基于饿了吗公司开发vue的UI组件库
Element Ui PC端的UI框架
MintUi 移动端的UI框架

二十二、vuex的使用
1、安装vuex

npm  install  vuex  -s

2、新建vuex文件夹，新建store.js
3、引入vue，使用vuex

import  Vue  from  ‘vue’ ;
import  Vuex  from  ‘vuex’ ;
Vue.use(Vuex)

4、定义state,mutation, getter,action,module

state里面主要存放数据；
mutation放方法，主要改变state里面的数据；（方法必须同步进行）
getter主要用来计算state里面的数据，返回一个新的值
action与mutation相似，支持异步提交，action提交的是一个mutation
actions: {
    increment (context) {
      context.commit(方法名)  // 触发mutation里面的方法 
    }
  }

5、实例化一个vuex.Store

const store = new Vuex.Store({
    state,
    mutations
})

6、暴露出来store

export  default  store;

7、在使用的页面引入vuex

import  store  from  ‘@/vuex/store.js’
挂载起来（data同级写上store）

8、使用vuex
（1）引入数据this. $s t o r e . s t a t e . 名（ 2 ）使用方法 t h i s .$ store.commit( ‘方法名 ‘ )
（3）引入getter里面的数据this. $s t o r e . g e t t e r . 名（ 4 ）引用 a c t i o n 通过 t h i s .$ store.dispatch( ‘方法名’ )

二十三、组件之间传值
1、父传子
（1）通过props

父组件调用子组件的时候，绑定动态属性
<v-header  :title=’title’ ></v-header>
在子组件里面通过props接收数据
data同级写props:{  title: String, }（这样写也可验证数据传递是否正确）

（2）通过 $p a r e n t 在子组件直接获取 t h i s .$ parent.数据
this.$parent.方法

2、子传父

在调用子组件的时候定义ref属性
<v-header  ref=’header’></v-header>
在父组件里面获取
this.$refs.header.数据
this.$refs.header.方法

标题

欢迎使用Markdown编辑器

你好！这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

全新的界面设计 ，将会带来全新的写作体验；
在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
全新的 KaTeX数学公式 语法；
增加了支持甘特图的mermaid语法¹ 功能；
增加了 多屏幕编辑 Markdown文章功能；
增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

~~删除文本~~

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片: Alt

带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash

创建一个自定义列表

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

如何创建一个注脚

一个具有注脚的文本。²

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 是通过欧拉积分

$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

关于 甘特图 语法，参考这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：:

这将产生一个流程图。:

关于 Mermaid 语法，参考这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

关于 Flowchart流程图 语法，参考这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件或者.html文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

mermaid语法说明 ↩︎
注脚的解释 ↩︎

老三、真皮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue入门学习

一、最简单的组件模板 Vue.component(‘todo-item’, {props: [‘todo’],template: ‘{{ todo.text }}’})var app7 = new Vue({el: ‘#app-7’,data: {groceryList: [{ id: 0, text: ‘蔬菜’ },{ id: 1, text: ‘奶酪’...
复制链接

扫一扫