vue.js基础
1，感谢菜鸟教程
2，第一个实例
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 </title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div> <script>
new Vue({ //new一个实例，
el: '#app', //选择id等于app的元素
data: {
message: 'Hello Vue.js!' //元素的内容是：xxx
}
})
</script>
</body>
</html>
3，看vue.js的数据结构
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
<h1>site : {{site}}</h1> //注意此时的site用了两个大括号
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: { //data是一个对象，用于定义属性，注意vue内部的data变化，html的内容也会变化
site: "菜鸟教程",
url: "www.runoob.com",
alexa: "10000"
},
methods: { //用于定义函数
details: function() {
return this.site + " - 学的不仅是技术，更是梦想！"; //this.site指的就是data里的site
}
}
})
</script>
</body>
data和dom中的内容是同步的：
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
<h1>site : {{site}}</h1>
</div>
<script type="text/javascript">
// 我们的数据对象
var data = { site: "菜鸟教程"} //原本是“菜鸟教程”
var vm = new Vue({
el: '#vue_det',
data: data
})
vm.site = "Runoob"
document.write(data.site + "<br>") // Runoob data.site = "hehe"
document.write(vm.site + "<br>") // hehe
</script>
</body>
4，Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。简言之就是它很底层很快。
我们的插值{{}}可以有如下用法：
a,插入文本，上面的例子就是插入了文本
b,插入html元素：
<body>
<div id="app">
<div v-html="message"></div> //插值写入以后相当于是这样的结构：<div v-html="message"><h1>菜鸟教程</h1></div>
</div> <script>
new Vue({
el: '#app',
data: {
message: '<h1>菜鸟教程</h1>'
}
})
</script>
</body>
c,属性：
<div v-bind:class="{active: isActive}"></div>，比如如果 这里 isActive 的值为 true 则会被渲染成 class='active' 如果为 false , 则 不会存在。
<style>
.class1{
background: #444;
color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1"> //据说v-model是双向的，而v-bind是单向的，选中了以后，data.use的值估计会变成true，然后v-bind的class就成了具有class1属性
<br><br>
<div v-bind:class="{'class1': use}"> //如果use的值为true，那就会被渲染成这个div的class=class1，至于为什么没有套上两层大括号，估计是约定俗成
v-bind:class 指令
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
use: false
}
});
</script>
</body>
d,表达式
vuejs在html页面上可以直接运算的，相当于直接在元素内写程序了
<div id="app">
{{5+5}}<br> //
{{ ok ? 'YES' : 'NO' }}<br> //yes
{{ message.split('').reverse().join('') }} //gniad
<div v-bind:id="'list-' + id">啦啦啦</div> //这个div具有list-1的id属性
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
message: 'daqing',
id : 1
}
})
</script>
e，指令
带有v-前缀的是特殊属性，比如v-if表示是否插入这个元素，true表示是。
<div id="app">
<p v-if="seen">现在你看到我了</p> //seen是false的话看不到p元素
<template v-if="ok"> //template是模板元素，但是具体内容不知
<h1>daqing</h1>
<p>学的不仅是技术，更是梦想！</p>
<p>哈哈哈，打字辛苦啊！！！</p>
</template>
</div> <script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
f,参数
<div id="app">
<pre><a v-bind:href="url">菜鸟教程</a></pre> //v-bind后面‘url'是从data.url里同步过来的哦，在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'http://www.runoob.com'
}
})
</script>
另外， v-on 指令也可以关注一下，它是监听事件：<a v-on:click="doSomething">
g,用户输入
<div id="app">
<p>{{ message }}</p>
<input v-model="message"> //这里会把用户输入当成message传到data中，然后再通过插值放到p元素中
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
v-model 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定
h，监听事件
<div id="app">
<p>{{ message }}</p> //此处同步的是data.message的值
<button v-on:click="reverseMessage">反转字符串</button> //此处不可用onclick=“function”这样的写法，因为reverseMessage不是一个function，而是约等于一个类方法
</div> <script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
l,过滤
<div id="app">
{{ message | capitalize }} //使用capitalize对前面的message进行过滤，中间隔着管道符号
</div> <script>
new Vue({
el: '#app',
data: {
message: 'runoob'
},
filters: { //此处定义的是过滤器
capitalize: function (value) { //value是管道前面的值，这个过滤函数的作用是首字母大写
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
m,缩写：
常用缩写：
<a v-bind:href="url"></a> 缩写为：<a :href="url"></a>
<a v-on:click="doSomething"></a>缩写为：<a @click="doSomething"></a>
5，条件语句
v-if指令：
<div id="app">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<h1>菜鸟教程</h1>
<p>学的不仅是技术，更是梦想！</p>
<p>哈哈哈，打字辛苦啊！！！</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
if和else
<div id="app">
<div v-if="Math.random() > 0.5">
显示if的div
</div>
<div v-else>
显示else的div
</div>
</div> <script>
new Vue({
el: '#app'
})
</script>
if...else if...else...
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div> <script>
new Vue({
el: '#app',
data: {
type: 'B' //type是哪个显示哪个div
}
})
</script>
v-show为true就显示div，为false就不显示
<div id="app">
<h1 v-show="ok">Hello!</h1>
</div> <script>
new Vue({
el: '#app',
data: {
ok: true
}
})
</script>
6，循环语句
v-for表示循环：循环data里的内容
<div id="app">
<ol>
<li v-for="i in sites"> //注意这个语法
{{ i.name }}
</li>
</ol>
</div> <script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob111' }, //对应的html中会生成3个li
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
迭代对象：
<div id="app">
<ul>
<li v-for="(value, key) in object"> //注意哦，此处的object在data内部
{{ key }} : {{ value }} //value和key都会打印出来，很像class
</li>
</ul>
</div> <script>
new Vue({
el: '#app',
data: {
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
}
})
</script>
迭代整数：
<div id="app">
<ul>
<li v-for="n in 10"> //返回1到10（包括10）
{{ n }}
</li>
</ul>
</div>
7，计算属性
直接在插值中写运算代码：
<div id="app">
{{ message.split('').reverse().join('') }} //反转字符串
</div> <script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
但是也可以通过computed属性来写：
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p> //指向的是computed里的function
</div> <script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
computed属性和method方法：
效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。性能上来说的话computed会更好一点
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
<p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
},
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
vue.js基础的更多相关文章
- Vue.js 基础指令实例讲解（各种数据绑定、表单渲染大总结）——新手入门、高手进阶
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...
- Vue.js基础拾遗
本篇目录: 模版语法 插值 指令 v-bind指令 v-on指令 计算属性与侦听器 计算属性VS方法 计算属性VS侦听属性 Class与Style绑定 绑定HTML Class 绑定内联样式 条件渲染 ...
- Vue.js 基础快速入门
Vue.js是一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.Vue.js提供了简洁.易于理解的API,使得我们能够快速地上手并使用Vue.js 如果之前已经习惯了用jQue ...
- Vue.js基础语法（三）
vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 1过滤器filte ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- 记录21.07.22 —— Vue.js基础（一）
VUE基础 语雀课件地址 Vue.js框架 Vue中文文档 Vue.js 创建vue项目 ①在一个空项目中引入vue的js文件 <script src="https://cdn.jsd ...
- 一份不错的vue.js基础笔记！！！！
第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...
- Vue.js 基础示例
为 Vue.js 初学者写了一些简单的示例,在线示例 示例源码 了解更多请查看 Vue.js 官网文档:http://vuejs.org.cn/guide/
- vue.js基础知识篇(7):表单校验详解
目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...
- vue.js基础知识篇(6):组件详解
第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...
随机推荐
- 重大变革即将来临 5G CPE会替代光纤入户吗？
导读 从国内的新闻报道上我们可以看到,从2018年下半年开始各大重要活动.春晚直播等,都宣布已经使用5G网络.既然支持5G网络的终端都还没有正式上市,那么5G网络是如何使用的呢?答案是5G CPE设备 ...
- BAT面试题：使用数组实现一个简单的阻塞队列
这道题是我亲身经历的一道大厂面试题,非常值得分享! 这道题可以分为两个步骤进行编码解答,第一步是基于数组实现一个队列,第二步是实现线程阻塞. 如果是基于数组实现栈的数据结构,那么我们只需要一个指针进行 ...
- C语言报错：error: expected ‘while’ at end of input } ^
在建线程池过程当中遇见上图所示错误: 解决方法: Linux中定义: SYNOPSIS #include <pthread.h> void pthread_cleanup_push(voi ...
- Day9 轨道角动量
转自中山大学电子与信息工程 http://seit.sysu.edu.cn/node/1004 能量.动量(角动量和线动量)光子的基本属性,其中光子角动量包括自旋角动量和轨道角动量(Orbital a ...
- Vim安装使用和配置
卸载vim sudo apt-get remove --purge vim (--purge 是完全删除,会连配置文件一起删除) 也可以使用yum等其它方式安装 ,如果提示apt-get命令不存在可以 ...
- .Net上传图片的一些问题
1.IIS上传文件大小限制和上传时间限制 异常详细信息: System.Web.HttpException: 超过了最大请求长度 打开iis找到部署的网站的配置编辑器 2.设置上传时间限制 3.设置上 ...
- 为什么qt成为c++界面编程的第一选择
为什么qt成为c++界面编程的第一选择 一.前言 为什么现在QT越来越成为界面编程的第一选择,笔者从事qt界面编程已经有接近8年,在这之前我做C++界面都是基于MFC,也做过5年左右.当时为什么会从M ...
- [模板] tarjan/联通分量/dfs树
//to update 边的分类 有向图边分为四类: 树边, 前向边, 返祖边(后向边), 横叉边. 上图: 判定 有向图 对图进行dfs, 不考虑已经遍历过的点, 得到dfs序 \(dfn_i\). ...
- IFE第一天
我也不知道自己到底能坚持多少天,希望66天可以坚持下来,flag在此. 第一天的知识大概就是了解一些基本概念. Web: 基于HTTP协议,利用浏览器访问网站. HTML 大概就是告诉浏览器我有一个什 ...
- windows无法完成安装，若要在此计算机上安装，请重新启动安装
当出现如上提示的时候,不要重启,按下shift+f10 会打开命令窗口,先输入cd oobe 进入到C:\windows\system32\oobe文件夹,输入msoobe回车然后输入msoobe即可 ...