vue.js笔记

来源：互联网发布：mac spss破解版编辑：程序博客网时间：2024/06/06 21:38

Vue.js笔记

Vue.js是一套构建用户界面的渐进式框架。
Vue只关注视图层，采用自底向上增量开发的设计。
Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
API(Application Programming Innterface,应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程
的能力，而又无需访问源码，或理解内部工作机制的细节。

目录解析

目录/文件说明
build 最终发布的代码存放位置。
config 配置目录，包括端口号等。
node_modules npm加载的项目依赖模块
src 这是要开发的目录，包含几个目录及文件：
assets:放置一些图片，如logo等。
components:目录里面放了一个组件文件，可以不用。
App.js:项目的核心文件。
static 静态资源目录，如图片、字体等。
test 初始测试目录，可删除
.xxxx文件这些是一些配置文件，包括语法配置，git配置等。
index.html 首页入口文件，你可以添加一些meta信息或同统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档，markdown格式

Vue.js模板语法

Vue.js使用了基于HTML的模板语法，允许开发者声明式的将DOM绑定至底层Vue实例的数据。
(DOM=Document Object Model,文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档
的内容和结构。换句话说，这是表示和处理一个HTML或文档的常用方法)
Vue.js的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统。

插值

数据绑定最常见的形式就是使用{{...}}（双大括号）的文本差值。
使用v-html指令用于输出html代码
<div id="app">
<div v-html="message"></div>
</div>

<script>
new Vue({
el: '#app',
data: {
message: '<h1>菜鸟教程</h1>'
}
})
</script>

HTML属性中的值应使用v-bind指令<div v-bind:class="{'class1':class1}">directiva v-bind:class</div>
指令时带有v-前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到DOM上。
<body>
<div id="app">
<p v-if="seen">现在你看到我了</p> //v-if指令将根据表达式seen的值(true或false)来决定是否插入p元素。
<h1>菜鸟教程</h1>
<p>学的不仅是技术，更是梦想！</p>
<p>哈哈哈，打字辛苦啊！！！</p>
</template>
</div>

<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
</body>
参数在指令后以冒号指明例如：v-bind指令被用来响应地更新HTML属性：
<body>
<div id="app">
<pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>

<script>
new Vue({
el: '#app',
data: {
url: 'http://www.baidu.com'
}
})
</script>
</body>
这里href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定。
v-on指令，用于监听DOM事件：<a v-on:click="doSomething"> 这里参数是监听的事件名。
修饰符是以半角句号，指明特殊后缀，用于指出应该以特殊方式绑定。
<form v-on:submit.prevent="onSubmit"></form>

用户输入
在input输入框中我们可以使用v-model指令来实现双向数据绑定：
<body>
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
</body>
可以使用v-on监听事件，并对用户的输入进行响应。下面实现点击按钮对字符串进行反转操作：
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
过滤器

缩写
v-bind缩写
<a v-bind:href="url"></a> //完整语法
<a:href="url"></a> //缩写
v-on缩写
<a v-on:click="doSomething"></a> //完整语法
<a @click="doSomething"></a> //缩写

Vue实例
每个Vue.js应用都是通过构造函数Vue创建一个Vue的根来实现的:
var vm = new Vue({
//选项
})

属性与方法
每个Vue实例都会代理其data对象里所有的属性

Vue.js条件与循环

v-if指令在元素和template中使用v-if指令：
<p v-if="seen">现在你看到我了</p>
<template v-if="ok"><p>哈哈</p></template>

v-else指令给v-if添加一个"else"块;
<body>
<div id="app">
<div v-if="Math.random() > 0.5"> //Math.random()是令系统随机选取大于等于 0.0 且小于 1.0 的伪随机 double 值
Sorry
</div>
<div v-else>
Not sorry
</div>
</div>

v-else-if 用作v-if的else-if块。可链式的多次使用:
<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>

v-show 使用其指令来根据条件展示元素：
<h1 v-show="ok">Hello!</h1>

循环语句
v-for指令需要以site in sites形式的特殊语法，sites是源数据组并且site是数组元素迭代的别名。
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>

<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
</body>
模板中使用v-for:
<ul>
<template v-for="site in sites">
<li>{{ site.name }}</li>
<li>--------------</li>
</template>
</ul>

v-for可以通过一个对象的属性来迭代数据：
<body>
<div id="app">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
}
})
</script>
</body>
也可以提供第二个的参数为键名：
<div id="app">
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
</ul>
</div>

第三个参数为索引：
<div id="app">
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
</div>

v-for迭代整数
<body>
<div id="app">
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
</div>

<script>
new Vue({
el: '#app'
})
</script>
</body>

Vue.js计算属性
计算属性关键词：computed.处理复杂逻辑时很有用。
计算属性实例：
<body>
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>

<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
实例2中声明了一个计算属性reversedMessage.
提供的函数将用作属性vm.reversedMessage的getter。
vm.reversedMessage依赖于vm.message，在vm.message发生改变时，vm.reversedMessage也会更新。

computed vs methods
computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
而使用methods,在重新渲染的时候，函数总会重新调用执行。
<body>
<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>
</body>
可以说computed性能会更好，但是如果你不希望缓存，可以使用methods属性。

computed属性默认只有getter,不过在需要时你也可以提供一个setter:
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'http://www.google.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
</script>

Vue.js样式绑定
class与style是HTML元素的属性，用于设置元素的样式，我们可以用v-bind来设置样式属性。

class属性绑定
可以为v-bind:class设置一个对象，从而动态的切换class;
1.将isActive设置为true可现实。
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{ active: isActive }"></div>
</div>

<script>
new Vue({
el: '#app',
data: {
isActive: true
}
})
</script>
2.text-danger类背景颜色覆盖了active类的背景色:
<div class="static"
v-bind:class="{active:isActive,'text=danger':hasError}">
</div>
3.text-danger类背景颜色覆盖了active类的背景色：
<div id="app">
<div v-bind:class="classobject"></div>
</div>

数组语法可以把一个数组传给v-bind:class
<div v-bind:class="[activeClass,errorClass]"></div>

errorClass是始终存在的，isActive为true时添加activeClass类：

Vue.js style(内联样式)
可以在v-bind:style直接设置样式：
<div id="app">
<div v-bind:style="{color: activeColor,fontsize: fontSize + 'px'}">菜鸟教程</div>
</div>
也可以直接绑定到一个样式对象，让模板更清晰：
<div id="app">
<div v-bind:style="styleObject">菜鸟教程</div>
</div>
<script>
new Vue({
e1:'#app',
data:{
styleObject:{
color:'green',
fontsize:'30px'
}
}
})
</script>

v-bind:style可以使用数组将多个样式对象应用到一个元素上：
<div id="app">
<div v-bind:style="[basestyles,overridingStyle]">菜鸟教程</div>
</div>

Vue.js时间处理器

事件监听可以使用v-on指令：
<div id="app">
<button v-on:click="counter +=1">增加1</button>
<p>这个按钮被点击了{{ counter }} 次。</p>
</div>
<script>
el:'#app',
data:{
counter:0
}
}）
</script>

阅读全文

0 0