vue之用法
引入vue.js
尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>或者：
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。
声明式渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
绑定事件 v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app-2">
<span v-bind:title="message"> // v-bind 绑定事件指令
鼠标悬停几秒显示此处动态绑定的提示信息！
</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app02 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
</script>
</body>
</html>
条件判断 v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app-3">
<span v-if="seen"> // v-if 判断指令，seen是true就展示
看到我了！
</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app3 = new Vue({
el: "#app-3",
data: {
seen: true
}
})
</script>
</body>
</html>
循环 v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app4 = new Vue({
el: "#app-4",
data: {
todos: [
{"text": "西瓜"},
{"text": "苹果"},
{"text": "西红柿"}
]
}
})
</script>
</body>
</html>
事件监听 v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app-5">
<p>
{{message}}
</p>
<button v-on:click="reverseMessage">反转信息</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app5 = new Vue({
el: "#app-5",
data: {
message: "Hello Vue!"
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
监听输入框 v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app-6">
<p>
{{message}}
</p>
<input type="text" v-model="message">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app6 = new Vue({
el: "#app-6",
data: {
message: "Hello Vue!"
}
})
</script>
</body>
</html>
Vue组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app-7">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("todo-item", { // 模板组件
props: ['todo'],
template: '<li>{{todo.text}}</li>'
}
);
var app7 = new Vue({
el: "#app-7",
data: {
groceryList: [
{id: , text: "苹果"},
{id: , text: "西瓜"},
{id: , text: "西红柿"}
]
}
})
</script>
</body>
</html>
vue之用法的更多相关文章
- Vue props用法详解
Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数 ...
- vue setTimeout用法 jquery滚动到某一个div的底部
//vue 中setTimeOut用法 var $this = this; setTimeout(function(){ $this.goEnd() }, 10); goEnd:function(){ ...
- vue better-scroll用法
滚动位置固定:在vue中通过路由切换页面时组件会自动滚动到顶部,需要监听滚动行为才能让滚动位置固定,better-scroll解决了这个问题. 常用效果:移动端很常见的效果,当滑动右边部分的时候,左边 ...
- Vue 基本用法
Vue的基本用法 模板语法{{ }} 关闭掉 django中提供的模板语法{{ }} 指令系统 v-text v-html v-show和v-if v-bind和v-on v-for v-model ...
- Vue基本用法
在学习Vue的基本用法之前,我们先简单的了解一些es6的语法 let: 特点:1.局部作用域 2.不会存在变量提升 3.变量不能重复声明 const: 特点:1.局部作用域 2.不会存在变量提升 3. ...
- vue插槽用法(极客时间Vue视频笔记)
vue插槽 插槽是用来传递复杂的内容,类似方法 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- Vue.extend用法
Vue.extend 是构造一个组件的语法器. 用法 Vue.extend ( options ),options 是对象: 使用基础Vue构造器,创建一个子类,参数是一个包含组件选项的对象,data ...
- vue基础用法
vue.js是什么 vue.js也称为vue,读音/vju/ 是一个构建用户界面的框架 是一个轻量级MVVM(Model-view-viewModel)框架,和angular,react类似,其实就是 ...
- 杂记 -- 关于vue-router样式、vuecli引用全局js函数、vue.slot用法
1.routerLinkTo 样式设置 首先,点击routerlink标签如下图:添加:router-link-active,router-link-exact-active两个类的样式 router ...
随机推荐
- linux中date命令显示昨天的日期信息?以特定格式显示时间?
需求描述: linux环境中,在使用date命令的时候,可以通过-d指定日期的字符串来显示日期 操作过程: 1.通过date显示昨天的日期 [root@redhat6 ~]# date -d 'yes ...
- VMware Playerでの仮想マシン起動エラー
Windows Updateすると.翌日VMware Playerの仮想マシン起動時に 「この仮想マシンを構成済み設定でパワーオンするのに十分な物理メモリがありません.」 のエラーとなることが時々あり ...
- GoF--服务定位器模式
服务定位器模式(Service Locator Pattern)用在我们想使用 JNDI 查询定位各种服务的时候.考虑到为某个服务查找 JNDI 的代价很高,服务定位器模式充分利用了缓存技术.在首次请 ...
- c#事件Unity与.Net对比
今天在看Unity3d的书,发现上面的调用事件比较特殊,比如说按钮事件 该方法写在OnGUI方法中if(GUILayout.Button("按钮1")) { //执行事件的处理 } ...
- 品鉴同事发来的炸金花的PHP程序代码
今天同事发来了一个炸金花的PHP程序,这个代码实现了两个人通过各自的三张牌进行权重计算,得到分数进行比较得到谁的牌大,我觉得里面还有一些问题,代码如下: <?php /** 每张牌的分值为一个2 ...
- 如何在LSI MegaRAID BIOS里设定RAID 10与Hot Spare
1. 同时按下 ”Ctrl + H” 进入MegaRAID WebBIOS 画面,可以看到所有物理硬盘 (Physical Drives) 的信息.请在左边视窗点选“Configuration Wiz ...
- 升级nodejs至最新
网上找出了很多升级nodejs版本的方法,都不太好用,直至发现这个: 在命令行窗口中执行:where node: 然后在nodejs官网中下载最新版本,将刚才目录下node.exe替换掉: 最后执行: ...
- django进阶-查询(适合GET4以上人群阅读)
前言: 下篇博客写关于bootstrap... 一.如何在脚本测试django from django.db import models class Blog(models.Model): name ...
- LESS CSS 框架简介与使用
简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中.HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义. ...
- [转载]Array.prototype.slice.call(arguments,1)原理
Array.prototype.slice.call(arguments,1)该语句涉及两个知识点. arguments是一个关键字,代表当前参数,在javascript中虽然arguments表面上 ...