Vue基础入门笔记
2024-08-26 12:39:48
不是面向DOM进行编程，而是面向数据去编程。当数据发生改变，页面就会随着改变。
属性绑定(v-bind)和双向数据绑定(v-model)
模板指令(v-bind:)后面跟的内容不再是字符串而是: js表达式 title指向的是data中的title变量
<div id="root">
<div :title="title">Hello world</div>
<input type="text" v-model="content">
<div>{{content}}</div>
</div>
<script>
new Vue({
el:'#root',
data:{
content:"this is a text",
title:'tAhis is a hello world'
}
})
</script>
计算属性及侦听器
<div id="root">
姓:<input type="text" v-model="firstName">
名:<input type="text" v-model="lastName">
<div>{{fullName}}</div>
<div>{{counts}}</div>
</div>
<script>
new Vue({
el:'#root',
data:{
firstName:'',
lastName:'',
counts:0
},
computed:{
fullName:function () {
return this.firstName + ' ' + this.lastName
}
},
watch:{
fullName:function () {
this.counts ++
}
}
})
</script>
v-for\v-if\v-show
<div id="root">
<div v-show="show">coming~</div>
<button @click="handleClick">toggle</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:'#root',
data:{
show:true,
list:[1,2,3,4,5]
},
methods:{
handleClick:function () {
this.show = !this.show
}
}
})
</script>
【vm.$el 、vm.$data】—— $开头指的是vue的实例属性或方法
动态改变字体颜色：
<div @click="ClickChange" :class="{actived:isActived}">change color</div>
<div :style="FontColor" @click="ChangeFontColor">change 2 color</div>
<div :style="[FontColor,{fontSize:'26px'}]" @click="ChangeFontColor">change 2 color</div>
data:{
isActived:false,
FontColor:{
color:'red'
}
},
methods:{
ClickChange:function () {
this.isActived = !this.isActived;
},
ChangeFontColor:function () {
this.FontColor.color= this.FontColor.color === 'red' ? 'black' : 'red'
}
},
//子组件中定义data，data必须是个函数 使用is解决H5上面的小bug 、ref的使用 （4-1）
关于ref的使用：
- 组件上: 获取到的是-子组件的一个引用
- div标签上： 获取到的是-标签对应的dom元素
<div ref="hello" @click="onClick">hello world</div>
methods: {
onClick:function(){
console.log(this.$refs.hello); //<div>hello world</div>
console.log(this.$refs.hello.innerHTML); //hello world
}
}
ref的使用元素求和：
<div id="root">
<counter ref="change1" @change="handleChange"></counter>
<counter ref="change2" @change="handleChange"></counter>
<div>总计：{{total}}</div>
</div> <script>
Vue.component('counter',{
data:function(){
return{
number:0
}
},
template:"<div @click='handleClick'>{{number}}</div>",
methods:{
handleClick:function () {
this.number++;
this.$emit('change')
}
}
})
var app = new Vue({
el:"#root",
data:{
total:0
},
methods:{
handleChange:function () {
this.total = this.$refs.change1.number + this.$refs.change2.number
}
}
})
</script>
父子组件传值
- 父组件向子组件传值 通过属性的方式
- 子组件通过事件触发的形式向父组件传值
单向数据流：子组件不能修改父组件传过来的数据，如果要修改，拷贝一个副本修改副本。
<div id="root">
<son :count="2" @change="hanldeChange"></son>
<son :count="3" @change="hanldeChange"></son>
<div>总计:{{total}}</div>
</div> <script>
var son = {
props:['count'],
data:function(){ //子组件避免修改父组件传过来的值
return{
number:this.count //克隆一份修改这个克隆的副本
}
},
template:"<div @click='handleClick'>{{number}}</div>",
methods:{
handleClick:function () {
this.number= this.number + 2; //克隆一份修改这个克隆的副本
this.$emit('change',2)
}
}
}
var app = new Vue({
el:"#root",
data:{
total:5
},
components:{
son:son,
},
methods:{
hanldeChange:function (step) {
this.total += step
}
}
})
</script>
非父子组件传值
总线传值：
注意点：
1，子组件不可以直接修改父级传来的值（selfContent）。
2，点击事件触发传值（$emit）
3, 生命周期钩子mounted【组件被挂载的时候执行的函数】, 监听bus改变（$on）
<chid content="sherlock"></chid>
<chid content="homlee"></chid> js:
Vue.prototype.bus = new Vue()
var chid = {
data: function () {
return {
selfContent: this.content
}
},
props: {
content: String
},
template: '<div @click="changecontent">{{selfContent}}</div>',
methods: {
changecontent: function () {
this.bus.$emit('change', this.selfContent)
}
},
mounted: function () {
console.log(this)
var this_ = this; //this作用域发生变化
this.bus.$on('change', function (msg) {
console.log(this)
console.log(this_)
this_.selfContent = msg
})
}
}
ps：this作用域改变
this代表父函数，_this是个人定义的一个变量。如果在子函数还用this，this的指向就变成子函数了，_this就是用来存储指向的。
单页应用：页面跳转--》js渲染
npm install stylus --save
npm install stylus-loader --save
npm install vue-awesome-swiper@2.6.7 --save
Swiper插件报错 Maximum call stack size exceeded 居然是因为一个名字 Swiper改为HomeSwiper恢复正常。 name
递归组件、某页面取消缓存、控制台显示的名字 多个组件的过渡
<style type="text/css">
.fade-enter,.fade-leave-to{
opacity: 0
}
.fade-enter-active,.fade-leave-active{
transition: opacity 1s
}
</style>
<div id="root">
<transition name="fade" mode='out-in'>
<component :is="type"></component>
</transition>
<button @click="handleClick">切换</button>
</div> <script type="text/javascript">
Vue.component('child',{
template:'<div>child</div>'
})
Vue.component('child-one',{
template: '<div>child-one</div>'
}) var vm= new Vue({
el: '#root',
data:{
type: 'child'
},
methods:{
handleClick:function(){
this.type = this.type === 'child' ? 'child-one' : 'child'
}
}
})
</script>
Vue动画封装
<div id="root">
<fade :show="show">
<div>hello world</div>
</fade> <fade :show="show">
<h1>hello world</h1>
</fade>
<button v-on:click="show = !show">切换</button>
</div> <script type="text/javascript">
Vue.component('fade',{
props: ['show'],
template:'<transition @before-enter="handleBeforeEnter" @enter="handleEnter"><slot v-if="show"></slot></transition>',
methods:{
handleBeforeEnter:function(el){
el.style.color="red"
},
handleEnter:function(el,done){
setTimeout(()=>{
el.style.color="green"
done()
},2000)
}
}
})
var vm= new Vue({
el: '#root',
data:{
show: true
}
})
</script>
在脚手架工具里：data不再是一个对象而是一个函数，它的返回值是具体的数据。
最新文章
- css文件 引用后不起作用
- NFS网络文件系统安装配置
- Yosemite 快速搭建 自带Apache+PHP5.6+MySQL 开发环境
- 无法卸载jdk的解决方法
- JavaScript-setInterval-周期性行定时器-倒计时
- Cocos2d-X3.0 刨根问底（五）----- Node类及显示对象列表源码分析
- ***PHP中empty()和isset()的区别
- Codeforces Round #360 (Div. 2) E. The Values You Can Make DP
- 如何用 Parse 和 Swift 搭建一个像 Instagram 那样的应用？（2）
- yum puppet 并整合控制台
- 【转】怎么在Foxmail回复/转发时使用签名？
- linux下I2C驱动
- Linux系统C语言socket tcp套接字编程
- 生成器&迭代器
- ios入门OC_UI晋级学什么？
- Java语言基础之数组
- MFC之几类消息的区别
- 剖析Elasticsearch集群系列之三：近实时搜索、深层分页问题和搜索相关性权衡之道
- POJ - 2635 E - The Embarrassed Cryptographer
- PAT 甲级 1057 Stack