参考网址: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. Jenkins控制台显示乱码

    方案: 解决控制台中文乱码问题: 点击左侧“系统管理”——右侧选择“系统设置”——“全局属性”,选择第一项:Environment variables,键值对列表,点击增加: 键:LANG 值:zh. ...

  2. 【css】max-height,min-height,height一起使用时,优先级问题

    MDN说法: max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大. max-height 属性用来设置给定元素的最大高度. 如果height 属性设置的 ...

  3. day26 Python __getattribute__

    __getattr__#不存在的属性访问,触发__getattr__ class Foo: def __init__(self,x): self.x=x def __getattr__(self, i ...

  4. robotframework连接mysql数据库

    1.安装databaselibrary.pymysql 通过cmd命令执行: pip install robotframework-databaselibrary pip install pymysq ...

  5. 腾讯app自动化测试读后感

    1.播放器播放视频,如何验证视频播放成功? 1.1播放时间>=0,获取Video标签里的current time判断. 1.2有播放画面,截屏获取. 框架自带的截图功能, 1.3有播放声音,获取 ...

  6. github 遇到Permanently added the RSA host key for IP address '192.30.252.128' to the list of known hosts问题解决

    刚开始使用github的时候不是很了解,新手一般的都会遇到这个问题Permanently added the RSA host key for IP address '192.30.252.128' ...

  7. AI 概率图模型

    概率图模型(Probabilistic Graphical Model) 有向图模型 信念网络 贝叶斯网络 无向模型 马尔科夫随机场 马尔科夫网络

  8. BZOJ1061 NOI2008 志愿者招募 线性规划、费用流

    传送门 一道思路很妙的线性规划网络流 设\(X_i\)表示第\(i\)天需要的人数,\(P_i\)表示第\(i\)种人雇佣的个数 那么我们可以列出一系列式子 比如说样例就可以列出三个式子: \(P_1 ...

  9. odoo 11 配置nginx反向代理

    第一步 安装nginx 和 certbot    具体步骤可以参考这篇文章的第6,7步. 第二步 配置nginx映射到odoo网站的文件,主要有2个,文件中的cloudapp.top是我们自己的域名, ...

  10. (第十三周)Final阶段成员贡献分

    项目名:食物链教学工具 组名:奋斗吧兄弟 组长:黄兴 组员:李俞寰.杜桥.栾骄阳.王东涵 个人贡献分=基础分+表现分 基础分=5*5*0.5/5=2.5 成员得分如下: 成员 基础分 表现分 个人贡献 ...