vue学习笔记记录-慕课网《vue2.5入门》黑马程序员《VUE开发小程序》
vue学习笔记记录-慕课网《vue2.5入门》
看慕课网上的 课程《vue2.5入门》
黑马程序员《VUE开发小程序》
写在前面：已经有一定的html，css，JavaScript的基础，学习vue为了更好地开发，写了一些 基础上的笔记，为了以后复习查阅
文章目录
- vue学习笔记记录-慕课网《vue2.5入门》
- 1、vue基础语法
- 1.1、创建vue实例、绑定数据和事件
- 1.2、属性绑定、数据双向绑定
- 1.3、计算属性、监听器
- 1.4、v-if、v-show和v-for指令
- 2、todolist案例开发
- 2.1、todolist功能开发
- 2.2、组件的拆分
- 2.3、组件与实例
- 2.4、todolist删除功能
- 3、Vue-cli的使用
- 搭建半天，没有成功，开始用HBuilder X来搭建了
- 4、uni-app介绍
- 4.1什么是uni-app
- 4.2、项目架构
1、vue基础语法
1.1、创建vue实例、绑定数据和事件
目录结构
- vuedemo
- vue.js
- index.html
导入vue库
<head>
<meta charset="utf-8">
<title>导入vue</title>
<script src="./vue.js" ></script>
</head>
绑定数据
<div id="root" >{{content}}</div>
<script>
new Vue({
el:"#root",
data:{
content:"hello",
}
})
</script>
绑定事件函数
其中 @click=是v-on:click的缩写
<div id="root" >{{content}}
<div @click="handleClick"></div>
</div>
<script>
new Vue({
el:"#root",
data:{
content:"hello",
},
methods:{
handleClick:function(){
alert(123),//弹出123
this.content="wolrd"
//点击后切换为world，改变数据
}
}
})
</script>
1.2、属性绑定、数据双向绑定
属性绑定
其中:title是v-bind:title的缩写
<div id="root" >
<div :title="title"> hello world</div>
//=后面的是js表达式，可以用'TEEL'+title
//则输出TEELthis is hello world
</div>
<script>
new Vue({
el:"#root",
data:{
title:"this is hello world "
//鼠标上去的提示语
}
})
</script>
下面展示一些 双向数据绑定。
双向数据绑定使用v-model:来
<div id="root" >
<input v-model:value="content" />
<div id="">{{content}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
content:"this is content ",
}
})
</script>
输入框内显示content的内容
输入框内改变，content也改变
1.3、计算属性、监听器
下面展示一些 计算属性。
计算属性采用computed:{}，计算内容写在其中
监听器采用watch::{}，变化写在其中
<div id="root" >
姓:<input v-model="firstName" />
名:<input v-model="lastName" />
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
firstName:'',
lastName:'',
count:0
},
computed:{//计算属性
fullName:function(){
return this.firstName+' '+this.lastName
}
},
watch:{//监听器
fullName:function(){
this.count++
}
}
})
</script>
效果
1.4、v-if、v-show和v-for指令
v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
下面展示一些 v-if。
<div id="root" >
<div v-if="show">hello world</div>
<button @click="handleClick">toggle</button>
</div>
<script>
new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show;//取反
}
}
})
</script>
默认
点击后
v-for
下面展示一些 v-for。
<div id="root" >
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
list:[1,2,3,3]
}
})
</script>
2、todolist案例开发
2.1、todolist功能开发
下面展示一些 todolist实例。
<div id="root" >
<div id="">
<input v-model="inputValue" />
<button @click="handleClick">提交</button>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
list:[],
inputValue:'',
},
methods:{
handleClick:function(){
this.list.push(this.inputValue),
this.inputValue=""
}
}
})
</script>
2.2、组件的拆分
全局组件
下面展示一些 全局组件。
Vue.component('todo-item',{
template:'item '
})
下面展示一些 局部组件。
var TodoItem ={
template:'item '
}
new Vue({
el:"#root",
components:{//对局部组件注册
'todo-item':TodoItem
}
})
用全局组件来实现todolist
下面展示一些 全局组件，并接收。
//组件
Vue.component('todo-item',{
props:['content'],//接收名为content的数据
template:'{{content}} '
})
2.3、组件与实例
vue是有一个个实例来构成的，每个组件都是实例，每个实例都可以包括props、template、methods
2.4、todolist删除功能
下面展示一些 完整的todolist 可以添加和删除。
<body>
<div id="root" >
<div id="">
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<!-- <li v-for="(item,index) of list" :key="index">{{item}}</li> -->
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content','index'],
//接收名为content的数据，inde为对应下标
template:'{{content}} ',
methods:{
handleClick:function(){
this.$emit('delete',this.index)
//触发delete，传递一个index值
}
}
})
new Vue({
el:"#root",
data:{
list:[],
inputValue:'',
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue),
this.inputValue=""
},
handleDelete:function(index){
//传入下标index
this.list.splice(index,1)
//list中index下标删除一个
}
}
})
</script>
</body>
3、Vue-cli的使用
搭建半天，没有成功，开始用HBuilder X来搭建了
4、uni-app介绍
4.1什么是uni-app
4.2、项目架构
