JAVA Vue学习

vue：读音类似view，是一个构建用户界面的渐进式框架
是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。
无论是简单还是复杂的界面，Vue 都可以胜任。
https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js 学习资料平台

一、使用vue

javascript操作的是DOM树
vue以数据为中心，没有dom的概念。
<script src="js/vue.js"></script>应用本地vue文件
new Vue({
    el: "#box",//挂载的对象
    data:{//定义变量属性值
    tiele:"vue6!"
}
})

二、使用

<span v-text="tiele"></span>
<span v-if="bool"></span>
这个值必须是布尔类型为真则显示，为假则把内容隐藏
<span v-for="(变量,索引值index)  in  nums"></span>
{{index}}   {{变量}}<br/>
<span v-html="tiele"></span>
<img v-bind:src="tiele"/>
引用图片   加上v-bind
new Vue({
      el: "#box",
      data:{
          title：“图片链接”}}）

三、vue表单

v-model:实现双向数据绑定
<input type="text" v-model="title" />

五、事件

v-on:click="show（）“单击事件简写为@click
//函数专区
methods:f
//函数专区
show:function()alert(456)
this.num1，在函数中使用data中定义的变量，
通常会加入this关键字this代表着当前的vue对象。
outlin：none
this.sz.push(this.title)给数组里按顺序添加东西，把title添加到数组的下一个
this.sz.splice(sum,1)删除数组索引值为sum的内容
box-shadow：10px 10px 10px black；div阴影值
border-radius：10px；圆角矩形
text-indent: 38px;input内容首行缩进