vue 学习 一
1.实例:
var vm = new Vue({
el: '#example',
data: {
a:1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
vm.a === data.a // -> true
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
// 这个回调将在 `vm.a` 改变后调用
})
2.数据绑定:
1)文本
<span>Message: {{ msg }}</span> //加载时会出现{{}},不推荐 <div>{{{ raw_html }}}</div> //raw_html是html时 <p v-html="msg"></p> <p v-text="msg"></p> <span v-once>这个将不会改变: {{ msg }}</span>
2)指令
<button v-bind:disabled="isButtonDisabled">Button</button>
<p v-if="seen">现在你看到我了</p>
<a v-bind:href="url">...</a> <a :href="url">...</a>//缩写
<a v-on:click="doSomething">...</a> <a @click="doSomething">...</a> //缩写
<form v-on:submit.prevent="onSubmit">...</form>
3.方法:
computed
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
结果:
Original message: "Hello"
Computed reversed message: "olleH"
vm.reversedMessage
的值始终取决于 vm.message
的值,当 vm.message
发生改变时,所有依赖 vm.reversedMessage
的绑定也会更新。
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message
还没有发生改变,多次访问 reversedMessage
计算属性会立即返回之前的计算结果,而不必再次执行函数。
和watch区别:https://blog.csdn.net/smartdt/article/details/75557369
4.动态绑定class
<div v-bind:class="{ active: isActive }"></div>
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div> <div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
} <div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
} <div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
} <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
5.条件语句和循环语句
v-if
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
v-if v-else-if
<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>
v-for:
列表:
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul> var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
对象:
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
new Vue({ el: '#v-for-object', data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
0. firstName: John
1. lastName: Doe
2. age: 30
数组的操作:
重新设值
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
减去一项
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
5.组件
全局组件
Vue.component('my-component-name', {
// ... options ...
})
局部组件 父组件像子组件传递数据
props
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
v-bind
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<div v-html="post.content"></div>
</div>
`
})
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
></blog-post>
子组件向父组件传递数据 https://www.cnblogs.com/daiwenru/p/6694530.html
https://blog.csdn.net/u011175079/article/details/79161029
https://blog.csdn.net/lander_xiong/article/details/79018737
vue 学习 一的更多相关文章
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue学习-01
1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...
- vue学习之vue基本功能初探
vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...
- vue学习第一篇 hello world
计划近期开始学习vue.js.先敲一个hello wolrd作为开始. <!DOCTYPE html> <html lang="en"> <head& ...
- vue学习心得
前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...
- vue学习笔记(二)——简单的介绍以及安装
学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- Vue学习2:模板语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Java 多线程 - ThreadLocal
ref: https://www.cnblogs.com/chengxiao/p/6152824.html
- php+jquery 上拉加载
<script type="text/javascript"> var resflow = true,pages =2; var ps=$("#ids&quo ...
- jquery选择器中中>和空格的区别
空格:$('parent childchild')表示获取parent下的所有的childchild节点 大于号:$('parent > childchild')表示获取parent下的所有下一 ...
- Windows route
ROUTE [-f] [-p] [-4|-6] command [destination] [MASK netmask] [gateway] [METRIC met ...
- thinkphp 空控制器
空控制器的概念是指当系统找不到请求的控制器名称的时候,系统会尝试定位空控制器(EmptyController),利用这个机制我们可以用来定制错误页面和进行URL的优化. 大理石平台价格表 现在我们把前 ...
- Divide by Zero 2018 and Codeforces Round #474 (Div. 1 + Div. 2, combined)G - Bandit Blues
题意:求满足条件的排列,1:从左往右会遇到a个比当前数大的数,(每次遇到更大的数会更换当前数)2.从右往左会遇到b个比当前数大的数. 题解:1-n的排列,n肯定是从左往右和从右往左的最后一个数. 考虑 ...
- hibernate_06_hibernate的延迟加载和抓取策略
1.延迟加载 1>类级别的延迟加载 指的是通过oad方法查询某个对象的时候,是否采用延迟, session. load(Customer class1L) 类级别延迟加载通过<class& ...
- CSS 继承和优先级
CSS继承性 CSS属性继承:外层元素的样式,会被内层元素进行继承. 多个外层元素的样式,最终都会“叠加”到内层元素上. 什么样的CSS属性能被继承呢? CSS文本属性都会被继承的: color. f ...
- 新增加的html里的标签元素,该元素作为事件,js获取不到id的问题
if(flag==0){ var p = document.createElement("p"); var text ...
- <Django>第一篇:入门的例子
1.MVT框架 Model(模型):数据库交互相关.在这部分一般需要进行三个操作: (1)面向数据库:模型对象.列表 (2)定义模型类:指定属性及类型,确定表结构(设计表),需要迁移(生成表) (3) ...