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 ...
随机推荐
- Core官方DI解析(5)-ServiceProviderEngine
最后来看看前面一直说的Engine(工作引擎),工作引擎接口是IServiceProviderEngine在ServiceProvider的构造函数中看到了根据指定的Mode创建了不同的实现类,下面先 ...
- JS 设计模式六 -- 代理模式
概念 为一个对象提供一个代用品或占位符,以便控制对它的访问. 当客户不方便直接访问一个对象的时候,需要提供一个替身对象来控制对这个对象的访问. 替身对象对请求做出一些处理之后, 再把请求转交给本体对象 ...
- 数据结构排序算法插入排序Java实现
public class InsertDemo { public static void main(String args[]) { int[] sort ={4,2,1,3,6,5,9,8,10,7 ...
- Virtual DOM 系列一：认识虚拟DOM
1. 什么是Virtual DOM? Virtual DOM(虚拟DOM)是指用JS模拟DOM结构.本质上来讲VD是一个JS对象,并且至少包含三个属性:tag(html标签),props(标签的属性, ...
- SQL SERVER2000将多行查询结果拼接到一行数据及函数的创建
处理前的查询结果如上图: 通过借助SQL变量的定义 ) DECLARE @Num int SET @Scope='' ), ' ' GROUP BY ContractID 实现了一下效果: //创建拼 ...
- java获取文件行数
public long getLineNumber(File file) { if (file.exists()) { try { FileReader fileReader = new FileRe ...
- bs4模块
1.导入模块 from bs4 import BeautifulSoup 2.创建对象 Beautiful Soup支持Python标准库中的HTML解析器,还支持一些第三方的解析器,如果我们不安装它 ...
- python学习日记（模块导入）
什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编写的代码(.p ...
- String方法，js中Array方法，ES5新增Array方法，以及jQuery中Array方法
相关阅读:https://blog.csdn.net/u013185654/article/details/78498393 相关阅读:https://www.cnblogs.com/huangyin ...
- luogu4166 最大土地面积 (旋转卡壳)
首先这样的点一定在凸包上 然后旋转卡壳就可以 具体来说,枚举对角线的一个端点,另一个端点在凸包上转,剩下两个点就是一个叉积最大一个最小,而这两个点也是跟着转的 所以是$O(N^2)$ #include ...