一.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. quake3中求1/sqrt(x)的算法源代码

    quake3中求1/sqrt(x)的算法源代码如下(未作任何修改): float Q_rsqrt( float number ) { long i; float x2, y; const float ...

  2. 内存管理 初始化(三)before mm_init()

    看到了mm_init(),期间将从bootmem迁移到伙伴系统,slab分配器也会建立. 在分析mm_init()之前,把setup_arch(&command_line)之后的函数分析了以下 ...

  3. ul li列表元素浮动导致border没有底边解决办法

    如图,当ul li,li元素浮动,并且ul元素也overflow:hidden清除浮动的时候,给li元素加了border,但是不显示底边,这时候要看是不是没有给li元素加高,因为加了border之后默 ...

  4. HTML5 标准规范完成了

    ​    ​万维网联盟(W3C)昨天宣布,HTML5 标准规范终于最终制定完成了,并已公开发布.对于前端工程师来说,这无疑是一个振奋人心的好消息. ​    ​众所周知,HTML5改变了互联网,将成为 ...

  5. Spring父容器与子容器

    在使用spring+springMVC的web工程中,我们一般会在web.xml中做如下配置: <context-param> <param-name>contextConfi ...

  6. 【GIS】ArcGIS JS 4.X

    require(["esri/Map", "esri/views/SceneView", "esri/TileLayer/TdtMapLayer/Td ...

  7. 【RF库Built-In测试】Catenate

    Name:CatenateSource:BuiltIn <test library>Arguments:[ *items ]Catenates the given items togeth ...

  8. HTML 水平线

    <hr /> 标签可以在 HTML 页面中创建水平线,通常用来分隔文章中的小节 <!DOCTYPE HTML> <html> <body> <p& ...

  9. CMake区分32位64位

    IF(CMAKE_CL_64) set(platform x64) ELSE(CMAKE_CL_64) set(platform x86) ENDIF(CMAKE_CL_64)

  10. 浅谈千万级PV/IP规模高性能高并发网站架构(转自老男孩)

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://oldboy.blog.51cto.com/2561410/736710 如果把来 ...