参考网址:https://vuefe.cn/

第一  安装

1.下载到本地后使用<script>标签直接引入

2.使用CDN引入

例如:使用CDN引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

3.在浏览器中安装Vue Devtools调试Vue.js程序

第二 介绍

1.Vue.js是什么

Vue.js(读音 /vjuː/,类似于 view 的读音)是一套构建用户界面(user interface)的渐进式框架。与其他重量级框架不同的是,Vue 从根本上采用最小成本、渐进增量(incrementally adoptable)的设计。Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动。

2.声明式渲染

例如:

<div id="app">
  {{ message }}
</div>
<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停此处几秒,
    可以看到此处动态绑定的 title!
  </span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})
</script>

  运行结果如下:

3.条件与循环

例如:

<div id="app-3">
  <span v-if="seen">现在你可以看到我</span>
</div>

<div id="app-4">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app3 = new Vue({
	el: '#app-3',
	data: {seen:true}
});
var app4 = new Vue({
	el:"#app-4",
	data:{
		todos:[
		{text: "Java"},
		{text: "PHP"},
		{text: "Python"},
		]
	}
});
</script>

  运行结果如下:

4.时间监听

例如:

<div id="app-1">
  <span v-on:click="reverseMessage">{{message}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app1 = new Vue({
	el:"#app-1",
	data:{
		message: "Hello Vue.js"
	},
	methods:{
		reverseMessage: function(){
			this.message = this.message.split('').reverse().join('');
		}
	}
});
</script>

  运行结果如下:

当点击文字时文字进行了翻转

5.双向数据绑定

例如:

<div id="data-bundle">
<p>您的用户名为:{{username}}</p>
<input name="username" v-model="username"/>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var data_bundle = new Vue({
	el:"#data-bundle",
	data:{
		username:"liuzhiqiangxyz"
	}
});
</script>

  运行结果如下所示:

当修改输入框的值时,上面段落文字也跟着改变

6.自定义模板标签

例如:

<div id="app">
<mylib v-bind:variable1={text:"Python"}></mylib>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('mylib', {props:['variable1'], template:"<p>{{variable1.text}}</p>"})
var app = new Vue({
	el:"#app",
	data:{
	}
});
</script>

  运行结果如下:

Vue.js文档的更多相关文章

  1. Vue.js文档学习

    Vue细碎小点 生命周期钩子:created().mounted().updated().destroyed() 不要在选项属性或回调上使用箭头函数,比如 created: () => cons ...

  2. Vue 学习文档

    Vue 学习文档 vue 起步 引包 启动 new Vue(options) options: el 目的地(可以用类名.标签名等,也可以直接用mod元素) #elementId .elementCl ...

  3. 解放生产力,自动化生成vue组件文档

    一.现状 Vue框架在前端开发中应用广泛,当一个多人开发的Vue项目经过长期维护之后往往会沉淀出很多的公共组件,这个时候经常会出现一个人 开发了一个组件而其他维护者或新接手的人却不知道这个组件是做什么 ...

  4. gulpfile.js文档

    gulp watch 实现监听不仅需要package.json文档,还需要gulpfile.js文档.否则无法实现. 1.gulp的安装 1.1 首先必须先安装node.js.这个可以参考之前的博客& ...

  5. 使用node.js 文档里的方法写一个web服务器

    刚刚看了node.js文档里的一个小例子,就是用 node.js 写一个web服务器的小例子 上代码 (*^▽^*) //helloworld.js// 使用node.js写一个服务器 const h ...

  6. vite插件-自动生成vue组件文档

    特点 支持热更新 快速启动,依赖于 vite,无需另起服务 自动生成组件导航 ui 采用了vant-ui的样式 核心方法覆盖率达到了 92.86% 使用 yarn add vite-plugin-vu ...

  7. 打造自己的Vue组件文档生成工具

    程序员最讨厌的两件事情,第一种是写文档,另一种是别人没有写文档.有没有直接根据vue组件生成文档的呢?当然是有的的.但第三方使用起来不一定能和现有项目结合使用,往往需要额外的注释用来标记提取信息.使用 ...

  8. JS文档生成工具:JSDoc 介绍

    JSDoc是一个根据javascript文件中注释的信息,生成API文档的工具.生成的文档是html文件.类似JavaDoc和PHPDoc. 用法 /** 一坨注释之类的 */JSDoc会从/**开头 ...

  9. JS文档和Demo自动化生成工具 - SmartDoc发布

    曾几何时,当你码神附体,一路披荆斩棘的完成代码后,带着“一码在手,天下我有”的傲然环顾之时,却发现单元测试.API文档.Demo实例陆续向你砸来,顿时有木有一种冰水挑战后的感觉.而这时你应该:哟哟,快 ...

随机推荐

  1. Go调试工具—— Delve

    参考https://github.com/go-delve/delve 安装 首先你必须有等于或高于1.8版本的Go,我的版本是: userdeMBP:go-learning user$ go ver ...

  2. Mac OS 安装Wget

    没有Wget的日子是非常难过的,强大的Mac OS 下安装Wget非常简单 下载一个Wget的源码包,http://www.gnu.org/software/wget/ 安装与配置 1. 首先下载一个 ...

  3. 剑指offer——链表中倒数第k个结点

    输入一个链表,输出该链表中倒数第k个结点. class Solution { public: ListNode* FindKthToTail(ListNode* pListHead, unsigned ...

  4. python 的__init__ 和__new__ 区别

    在此介绍一下  __init__ 和  __new__ 先后调用的区别 代码如下: # __init__ 和 __new__的区别 # 通常在编代码时,__init__ 较为常见,但是__new__却 ...

  5. VS2015/Visual Studio快捷键无效问题

    0 VS2015快捷键无效问题的解决办法 快捷键的使用可以大大提高编码效率,VS为我们内置了不少的常用快捷键组合,实际使用过程中往往会随着计算机上安装其他软件引起快捷键冲突,导致VS快捷键失效,解决办 ...

  6. 十二省联考题解 - JLOI2019 题解

    十二省联考题解 - JLOI2019 题解 两个T3的难度较大 平均代码量远大于去年省选 套路题考查居多 A 难度等级 1 $n^2$暴力可以拿到$60$分的优秀成绩 然后可以想到把区间异或转化为前缀 ...

  7. Nginx学习之如何搭建文件防盗链服务

    前言 大家都知道现在很多站点下载资料都是要收费的,无论是积分还是金币,想免费只能说很少很少了,那么这些网站是如何做到资源防盗链的呢? 这里推荐一款比较容易上手的神器,Nginx本身提供了secure_ ...

  8. Java线程池实现原理与技术(ThreadPoolExecutor、Executors)

    本文将通过实现一个简易的线程池理解线程池的原理,以及介绍JDK中自带的线程池ThreadPoolExecutor和Executor框架. 1.无限制线程的缺陷 多线程的软件设计方法确实可以最大限度地发 ...

  9. Java多线程编程核心技术(二)对象及变量的并发访问

    本文主要介绍Java多线程中的同步,也就是如何在Java语言中写出线程安全的程序,如何在Java语言中解决非线程安全的相关问题.阅读本文应该着重掌握如下技术点: synchronized对象监视器为O ...

  10. java 一次CPU占用过高问题的排查及解决

    最近一段时间  某台服务器上的一个应用总是隔一段时间就自己挂掉      用top看了看  从重新部署应用开始没有多长时间CPU占用上升得很快 排查步骤 1.使用top 定位到占用CPU高的进程PID ...