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 ...
随机推荐
- ASP.NET Core RSA加密或解密
前言 这两天主要是公司同事用到了RSA加密,事后也看了下,以为很简单,最终利用RSACryptoServiceProvider来实现RSA加密,然后大致了解到RSACryptoServiceProvi ...
- openstack第六章：dashboard
第六篇horizon— Web管理界面 一.horizon 介绍: 理解 horizon Horizon 为 Openstack 提供一个 WEB 前端的管理界面 (UI 服务 )通过 ...
- 查看dll或lib中包含的函数
这个功能主要用于检测是否包含自己所需的函数,可能在解决 error LNK2019 时会用到. dumpbin /exports avcodec.lib /out:test.txt
- java核心卷笔记--P48字符串3.6.5
一定不要使用 == 运算符检测两个字符串是否相等 ! 这个运算符只能够确定两个字串是否放置在同一个位置上 . 当然 , 如果字符串放置在同一个位置上 , 它们必然相等. 但是 ,完全有可能将内容相同的 ...
- Leetcode 5
HashTable Easy 1. 136. Single Number 0与0异或是0,1与1异或也是0,那么我们会得到0 class Solution { public: int singleNu ...
- Plugin Kotlin was not installed: Cannot download
到 https://plugins.jetbrains.com/plugin/6954-kotlin下载对应版本(右键复制链接地址,用迅雷下载),放到androidstudio安装目录下的plugin ...
- Linux keepalived工作原理
keepalived简介与工作原理 Keepalived的作用是检测服务器的状态,如果有一台web服务器宕机,或工作出现故障,Keepalived将检测到,并将有故障的服务器从系统中剔除,同时使用其他 ...
- mysql生成20万条数据(连表插入)
创建一个存储过程 DELIMITER $$ -- 设置定界符为$$,与';'意思相同,防止相同符号产生冲突 USE `yunkc_base1`$$ -- 使用数据库 DROP PROCEDURE IF ...
- 超详细的Guava RateLimiter限流原理解析
超详细的Guava RateLimiter限流原理解析 mp.weixin.qq.com 点击上方“方志朋”,选择“置顶或者星标” 你的关注意义重大! 限流是保护高并发系统的三把利器之一,另外两个是 ...
- Linux基础知识梳理
Linux基础知识梳理 Linux内核最初只是由芬兰人林纳斯?托瓦兹(Linus Torvalds)在赫尔辛基大学上学时出于个人爱好而编写的.Linux是一套免费使用和自由传播的类Unix操作系统,是 ...