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 ...
随机推荐
- IdentityServer4实战 - 与API单项目整合
一.前言 我们在实际使用 IdentityServer4 的时候,可能会在使用 IdentityServer4 项目添加一些API,比如 找回密码.用户注册.修改用户资料等,这些API与Identit ...
- node的第一步，hello，以及小技巧和CPU使用情况。到底能用几个核心？
安装了啥的就不说了,百度一下有很多. Windows环境.Linux不会,所有就不说了. 1. hello Word node的hello Word很简单,就一行. console.log(&quo ...
- 偶发异常BUG，如何高效精准分析排查定位？
偶发异常BUG,如何高效精准分析排查定位? 作为测试,经常会收到领导.同事.用户反馈过来各种各样BUG,令人措手不及 首选需要判断确认是不是BUG,不要急于给予回复,需有充分的条件给予说明回复 很多测 ...
- 深度学习识别CIFAR10：pytorch训练LeNet、AlexNet、VGG19实现及比较（二）
版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com AlexNet在2012年ImageNet图像分类任务竞赛中获得冠军.网络结构如下图所示: 对CIFA ...
- Centos7 启动指定docker容器报错
今天做docker实验时,把docker镜像pull下后,启动报如下错误: 错误信息:WARNING: IPv4 forwarding is disabled. Networking will not ...
- Java 异常体系(美团面试)
Java把异常作为一种类,当做对象来处理.所有异常类的基类是Throwable类,两大子类分别是Error和Exception. 系统错误由Java虚拟机抛出,用Error类表示.Error类描述的是 ...
- JavaScript与C# Windows应用程序交互方法
一.建立网页 <html> <head> <meta http-equiv="Content-Language" content=&quo ...
- jvm调优参数
堆溢出测试args:-verbose:gc -Xms20M -Xmx20M -XX:+PrintGCDetails 栈层级不足args:-Xss128k 常量池内存溢出args : -XX:PermS ...
- magento 2 method config
1. 模板渲染静态文件: <?php echo $this->getViewFileUrl('requirejs::require.js'); ?> 2.
- MT【328】向量里的最佳逼近
已知平面向量$\overrightarrow {a},\overrightarrow {b}$满足$|\overrightarrow {a}|=4,|\overrightarrow {b}|=2$.若 ...