一.vue基础语法

语法: {{msg}}
html赋值: v-html=""
绑定属性: v-bind:id=""
使用表达式: {{ok? "yes": "no"}}
文本赋值: v-text=""
指令: v-if=""
过滤器: {{msg | capitalize}}

条件渲染

v-if
v-else
v-else-if
v-show
v-cloak

vue组件

全局组件和局部组件
父子组件通讯-数据传递
Slot

二.路由基础介绍

1.前端路由 ==> 路由是根据不同的url地址展示不同的内容或页面
前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做, 之前是通过服务端根据url的不同返回不同的页面实现的

2.什么时候使用前端路由
在单页面应用, 大部分页面结构不变, 只改变部分内容的使用

3.前端路由有什么优点和缺点?
优点 ==> 用户体验好, 不需要每次都从服务器全部获取, 快速展现给用户

缺点 ==> 不利于SEO, 只有一张页面
使用浏览器的前进,后退键的时候会重新发送请求, 没有合理利用缓存
单页面无法记住之前滚动的位置, 无法在前进, 后退的时候记信滚动的位置

vue-router用来构建SPA

router-link当成a标签
<router-link></router-link>或者this.$router.push({path:""});
<router-view></router-view>

1.动态路由匹配
2.嵌套路由
3.编程式路由
4.命名路由和命名视图

1.动态路由匹配 (router/index.js)

import GoodsList from '@/views/GoodsList'

export default new Router({
mode: "history",
routes: [
{
path: '/goods/:goodsId/user/:name',
name: 'HelloWorld',
component: GoodsList
}
]
})

GoodsList.vue

<template>
<div>
这是商品列表页面
<span>{{$route.params.goodsId}}</span>
<span>{{$route.params.name}}</span>
</div>
</template>

3.编程式路由
通过js来实现页面的路转

$router.push("name");
$router.push({path:"name"})
$router.push({path:"name?a=123"}) 或者 $router.push({path:"name", query:{a:123}})
$router.go(1);

2-5 vue基础语法的更多相关文章

  1. python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  2. 一、vue基础语法(轻松入门vue)

    轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...

  3. Vue基础语法-数据绑定、事件处理和扩展组件等知识详解(案例分析,简单易懂,附源码)

    前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...

  4. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例,vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

  5. Vue(1)- es6的语法、vue的基本语法、vue应用示例,vue基础语法

    一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...

  6. 一、vue基础--语法

      用到的前台编程工具是Visual Studio Code,暂时是官网下载vue.js到本地使用 一.Visual Studio Code需要安装的插件: jshint :js代码规范检查 Beau ...

  7. Vue 基础语法入门(转载)

    使用vue.js原文介绍:Vue.js是一个构建数据驱动的web界面库.Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件.vue.js上手非常简单,先看看几个例子: 例一: ...

  8. 2. Vue基础语法

      模板语法: Mustache语法: {{}} Html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok?'Yes': ...

  9. Vue基础语法与指令

    项目初始化 用vscode打开终端,输入npm init -y生成package.json 然后安装vue npm install vue 需要注意的是,我遇到了这个问题 出现原因:文件夹名和生成的p ...

随机推荐

  1. nginx-windows版

    nginx  windows版,添加 分别是: 重启.启动.停止 下载地址:https://files.cnblogs.com/files/007sx/nginx-windows.zip

  2. 使用nginx反向代理解决前端跨域问题

    1. 首先去Nginx官网下载一个最新版本的Nginx,下载地址:http://nginx.org/en/download.html.我这里下载的版本是:nginx/Windows-1.12.0.下载 ...

  3. 边框颜色为 tintColor 的 UIButton

    创建一个 UIButton 的子类,重写其方法: - (void)drawRect:(CGRect)rect { [[self layer] setCornerRadius:CORNER_RADIUS ...

  4. JSTL时间格式化项目小试

    我在之前的博客中虽然详尽的介绍了JSTL在各个载体中的用法,也介绍了它和EL的共同使用的好处,但是只是顺便提了一下JSTL的格式化. 今天在项目中遇到了一个小问题,也就想到这,马上就开始实践了一下,效 ...

  5. Android学习之——ListView

    背景知识 ListView在Android应用中使用非常广泛,手机上必备的微博.网易新闻等,都使用了ListView.

  6. Android 布局学习之——LinearLayout属性baselineAligned的作用及baseline

    相信大家对LinearLayout已经相当熟悉,但你们是否了解它的属性baselineAligned呢? Android官方文档是这么描述的:

  7. JS去除字符串左右两端的空格

    去除字符串左右两端的空格,在vbscript里面可以轻松地使用 trim.ltrim 或 rtrim,但在js中却没有这3个内置方法,需要手工编写.下面的实现方法是用到了正则表达式,效率不错,并把这三 ...

  8. git branch 命令

    1.git init 该命令执行之后并没有创建branch 2.git add 添加文件,这时branch 也还没生成.git branch name也没用 3.git commit 提交到git r ...

  9. linux下.so、.ko、.a的区别

    各类文件的区别与作用: 1.对于.so文件 .so文件是用户层的动态链接库,用于用户层的动态链接使用,内核态的代码同样不能直接访问. 2.对于.ko文件 .ko文件是内核态的动态链接库,用于内核态的动 ...

  10. Java -- 获取指定接口的所有实现类或获取指定类的所有继承类

    Class : ClassUtil package pri.lime.main; import java.io.File; import java.io.IOException; import jav ...