此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助。

什么是Vue?

Vue.js (读音 /vjuː/,类似于 view)
是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue
采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue
生态系统支持的库
结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

学习Vue需要掌握HTML、CSS 和 JavaScript 中级前端知识,如果是前端初学者不建议学习Vue。

安装与语法

安装

Vue的安装有多种方法,具体安装参考官方文档Vue安装选项
本文中的示例采用最简单的的一种安装方式,即在html文件中直接引入。代码如下:
<script src="https://unpkg.com/vue"></script>

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统:
<div id = "root">{{message}}</div>
new Vue({
el:'#root',
data:{
message:'Hello World!'
}
})

指令

几个常用的vue指令
  • v-bind
  • v-if  v-else-if v-else
  • v-for
  • v-on
  • v-model
  • v-html
下面通过代码简单了解
html代码:
<div id = "root">

	<div v-bind:title="message">{{message}}</div>

	<!--v-for遍历数组或对象,value为值,index是下标-->
<ul>
<li v-for="(value,index) in courseList">{{index}}/{{value}}</li>
</ul> <!--v-if 判断语句,值如果为false,删除dom节点-->
<div v-if="isShow">{{hideInfo}}</div> <!--v-on 绑定事件-->
<button v-on:click="showFunc">{{btnInfo}}</button> <!--v-model 实现表单输入和应用状态之间的双向绑定-->
<input type="text" v-model="username"/>{{username}} <!--为元素设置html-->
<div v-html="username"></div> </div>

js代码:

new Vue({
el:'#root',
data:{
message:'Hello Vue!',
isShow:true,
hideInfo:"我是一个隐藏的块",
btnInfo:'显示隐藏',
courseList:[
'yiyiyi',
'ererer',
'sansansan'
],
username:'cheng'
},
methods:{
showFunc:function(){
this.isShow = !this.isShow;
}
}
})

网页显示结果




此时通过点击按钮是可以控制按钮上方块的显示隐藏的。
v-model实现实现表单输入和应用状态之间的双向绑定。
在input中输入值,所有应用了username的元素,都会发生变化。如下图:

v-if vs v-show

与元素的显示隐藏相关的指令还有v-show。v-show和v-if的显示隐藏是不同的。
v-show是隐藏元素 为元素添加display:none,保留dom节点;而v-if的通过false隐藏是删除dom节点。

那什么时候用v-if,什么时候用v-show呢?

官方给了建议

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

component模板

这个功能很强大,可以自定义html模板。
直接看代码:
<div id = "root">

	<div>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div> </div>
Vue.component('my-component',{
template:'<div>Hello</div>'
})

结果


这篇文章就先整理到这里,后续还会发布我的Vue的笔记。




Vue学习笔记-Vue基础入门的更多相关文章

  1. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  2. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  3. Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)

    五  Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...

  4. Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  5. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  6. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  7. Vue 学习笔记之快速入门篇

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与 ...

  8. Vue学习笔记:基础

    Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的 插值 数据绑定最常见的形式就是使用“Mustache”语法(双大括号)的文本插值 指令 指令的定义:Direct ...

  9. Vue学习笔记-Vue.js-2.X 学习(七)===>脚手架Vue-CLI(路由Router)

    脚手架Vue-CLI(路由Router) 一 按装(通过新创建脚手架按装),如果在原来的脚手架上按装直接进图型化界面vue ui的插件按装. 二 使用(上面按装下面步骤自动会生成) 第一步:导入路由对 ...

随机推荐

  1. 个人工作中ssd、audio python脚本总结

    1.os.system(cmd)或者os.popen(cmd)调用外部命令 cmd中需要注意特殊字符的转义功能,如: USBSTOR\DISK&VEN_GENERIC-&PROD_SD ...

  2. 数据库中删除语句Drop、Delete、Truncate的相同点和不同点的比较

    数据库删除语句的分别介绍: Delete:用于删除表中的行(注:可以删除某一行:也可以在不删除表的情况下(即意味着表的结构.属性.索引完整)删除所有行) 语法:删除某一行:Delete From 表名 ...

  3. 使用测试思路快速学习Python-适合测试工程师的学习方法

    本文采用Python doctest单元测试的方法,直接用代码学习代码,滚雪球式的迭代学习. doctest是一个python标准库自带的轻量单元测试工具,适合实现一些简单的单元测试.它可以在docs ...

  4. 关于string.h中字符串的操作

     string.h中字符操作的函数 注意:**对字符数组的多次操作需要进行赋初值.或者善于用memset()函数进行清空数组的操作.**     否则容易出现错误. string.h文件中函数的用法加 ...

  5. 【ASP.NET MVC 学习笔记】- 01 理解MVC模式

    本文参考:http://www.cnblogs.com/willick/p/3195560.html 1.MVC模式是软件系统的一种架构模式,它将软件分为三大模块: 模型(Model):封装业务逻辑以 ...

  6. R学习笔记 第二篇:矩阵、数组和列表

    向量是一维的,只有长度(行),没有其他维度.R中存在更高维度的对象,他们是矩阵,数据框,数组.这些对象的下标都是使用中括号[],第一个维度是row,第二个维度是column,依次类推,[row,col ...

  7. 有序线性表(存储结构数组)--Java实现

    /*有序数组:主要是为了提高查找的效率 *查找:无序数组--顺序查找,有序数组--折半查找 *其中插入比无序数组慢 * */ public class MyOrderedArray { private ...

  8. 初学者易上手的SSH-hibernate03 三大状态与缓存

    这章主要来浅的学习下hibernate三大状态与缓存.首先来看下三大状态: 如上图,三大状态分别为临时状态(Transient),持久化状态(Persistent),游离状态(Detached).那么 ...

  9. python字符串,列表,字符串,元组,集合的一些方法

    字符串方法 __contains__ #等同in name = 'erroy' result = name.__contains__('er') #判断元素是否包含er print(result) T ...

  10. Maven项目构建管理

    一.Maven的作用 在开发中,为了保证编译通过,我们会到处去寻找jar包,当编译通过了,运行的时候,却发现"ClassNotFoundException",我们想到的是,难道还差 ...