vue.js学习系列-第一篇

Z时代
2024-01-10
分类：综合

vue

VUE系列
一简介
vue是一个兴起的前端js库,是一个精简的MVVM.从技术角度讲,Vue.js专注于 MVVM 模型的 ViewModel 层.它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染
二优势
1 vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

2 我们可以理解成VUE架构是由无数个vue实例组成,每个组件也被称为实例.每个实例有各自的属性数据和方法
三示例
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div >{{ message }}</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
四分类讲解
1 初始化类
var appname = new Vue({})//定义初始化对象,对对象进行操作赋值
2 内部定义类属性
1 el属性(类似js中的id属性,通过此属性传递对象,通常作用于div id)
2 data属性(1 字典类型 { key:value} 2 采用{{key}}方式调用 3 alue可以是字符串,数字,列表,字典等任何支持的数据类型集合)

3 template属性(可以从这里进行模板的定义,如果不进行配置,则调用绑定对象的模板)

4 method 属性（定义vue实例对象的动作方法)

5 components ( 局部组件的注册从这里进行)
3 调用内部调用变量
1 object(定义的对象).$data(属性).message(value)
2 this(定义的对象).message(value)
4 method部分
method:{functionname: function1(),functionname: function2()}
5 标签与属性
1 li标签
v-for属性目的:循环过滤 v-text属性目的:输出变量 v-html属性目的:输出变量,但是不会转义语法
eg:
<li v-for='item in itmes' v-text="item" v-html="item">item</li> //列表循环代替{{value}}
vue部分
data:{ list:[1,2,3,4,5,6]

2 button标签
v-on属性目的:触发事件

v-on: 可以缩写成@(小技巧) 配合click事件
eg:
<button @click="clickfunction>提交</button>//提交触发事件
vue部分
method:{
clickfunction: function(){
alter(this.inputvalue)
}
}
3 input标签
v-model属性目的通过input输入的值改变定义对象的属性,实现数据绑定
eg:
<input type='text' v-model="inputvalue />
vue部分
data:{ inputvalue:"3"},
6 组件方法
1 调用vue方法(全局)
Vue.component(
'object-name',
{
props:[value], //定义变量
template:"<li>{{value}}</li>"} //循环显示变量
}
)
2 定义对象(局部)
1 定义
var object-name={
props:[value], //定义变量
template:"<li>{{value}}</li>"} //循环显示变量
}
2 vue中注册
components:{
"object-name":object-name
},
2 body调用
<todo-item v-bind:content="item" v-for="item in list"></todo-item>
tod-itme为定义的object name
content为方法定义变量
v-bind 将变量和循环列表变量绑定
v-for 循环列表本身
7 总结
1 模板在组件中定义 2 局部组件需要在vue中注册 3 局部组件变量需要与循环变量进行绑定