扫一扫前端软件开发技术VUE使用
来源：未知 时间：2018-55-19 浏览次数：144次
前端软件开发技术VUE使用，vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动<div id="root"><h1>dddd{{msg}}</h1></div>
new vue({
el:"#root"
data:{msg:"xxxx"}
})
一、属性解释:
- el：表示指定vue对象绑定的html元素
- data：为绑定html填充的元素
- template：vue模板，即挂载点中的html元素及替换数据，挂载点内部的所有html及替换数据内容
- methods：绑定的方法集合
二、挂载点，模板，及实例
- 挂载点：将id为root的HTML元素叫做该绑定vue对象的挂载点
- 模板：挂载点中的所内容叫模板，如<h1>dddd{{msg}}</h1>,
- 模板的实现方式有两种，第一种是在html行内写，第二种是在VUE对象中指定template属性：
1.<div id="root"><h1>dddd{{msg}}</h1></div>
2.<div id="root"></div>
new vue({
el:"#root"，
template：<h1>dddd{{msg}}</h1>
data:{msg:"xxxx"}
})
- 实例：new vue（{}）就是创建了一个vue实例，vue实例必须指定挂载点，还可以操作模板即填充数据等
三、模板中插入date中的值有两种方法
- 1.{{}}符号叫做插值表达式,如，{{msg}}
- 2.可以使用v-text=变量名来插入(或v-html=变量名)，如<h1 v-text="msg"></h1>
- 3.v-text与v-html的区别，前者只能插入文本，不能插入html代码，HTML代码插入会被转义直接显示，后者可以插入html与文本
<div id="root" ><h1 v-on:click="functionname"> {{msg}}</h2></div>
new vue ({
new vue ({
el:"#root",
data:{
msg:hhhhhh
},
methods:{
functionname:function(){
alert(111)
}
}
})
四、方法绑定
四、方法绑定
1.vue使用v-on:click="functionname" 绑定事件，在vue实例的methods属性中定义要绑定的方法(多个)
五、在模板中循环插入数据 v-for="data in datas"的使用
五、在模板中循环插入数据 v-for="data in datas"的使用
<div id="app1"><ul><li v-for="msg1 in msgs">{{ msg1 }}</li></ul></div>
app1 = new Vue({
el:"#app1",
data:{
msgs:["aaaa","bbbb","cccc","dddddd","eeeeeeeee"]
}
})
vue是目前非常流行的软件开发前端技术，使用广泛，易于维护，使得前后台分离，后台数据读取等操作会在下片文章中继续讲解
vue是目前非常流行的软件开发前端技术，使用广泛，易于维护，使得前后台分离，后台数据读取等操作会在下片文章中继续讲解
- 上一篇: vmware虚拟操作系统与数据恢复
- 下一篇: 前端软件开发技术VUE使用(第二部分)