vue java 开源oa框架 vue开发框架使用实例

转载

mob64ca1401b651 2024-01-04 06:01:31

文章标签 vue java 开源oa框架 vue.js javascript 前端 Vue 文章分类 Java 后端开发

Vue框架学习02

一、Vue实例

1、创建一个Vue实例
2、el选项(属性)
3、data选项
4、methods选项
5、computed选项(计算属性)
6、watch选项(状态监听)
7、filters选项(过滤器)

二、Vue数据绑定

1、绑定样式
2、内置指令

一、Vue实例

1、创建一个Vue实例

在Vue项目中，每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的，创建Vue实例的代码如下：

<script>
	var vm = new Vue({
		// 选项
	})
</script>

通常使用 vm (ViewModel 的缩写) 这个变量名来表示 Vue 实例。

当创建一个 Vue 实例时，你可以传入一个 选项(Option) 对象。常用的选项如下表所示：

选项	说明
data	类型：通常为对象(Object)，Vue 实例的数据对象。Vue 会递归地把 data 的属性(property)转换为 getter/setter，从而让 data 的属性能够响应数据变化。
methods	类型：{ [key: string]: Function }，定义Vue 实例中的方法
computed	类型：{ [key: string]: Function \| { get: Function, set: Function } }，Vue的计算属性
watch	类型：{ [key: string]: string \| Function \| Object \| Array}，监听数据变化
filters	类型：对象(Object)，过滤器
el	类型：字符串(string) \| HTML元素(Element)，唯一根标签
components	类型：对象(Object)，定义子组件

2、el选项(属性)

el表示唯一根标签，用以给 Vue 实例绑定一个页面上已存在的 DOM 元素。其值可以是CSS选择器字符串或HTMLElement。(通常为 CSS id 选择器字符串)

代码示例如下：

<div id="app"></div>
<script>
	var vm = new Vue({
		el: '#app' // 通过el选项将此Vue实例与id为“app”的div元素绑定在一起
	})
</script>

3、data选项

data表示为Vue实例中的数据对象，Vue会将 data 的属性转换为getter、setter，从而让 data 的属性能够响应数据变化。

Vue实例创建后，可以通过vm.$data访问原始数据对象。Vue实例也代理了 data 对象的所有属性，因此访问相当于访问vm.$。

代码示例如下：

<div id="app">
	<p>{{name}}</p>
</div>
<script>
	var vm = new Vue({
		el: '#app', // 通过el选项将此Vue实例与id为“app”的div元素绑定在一起
		data: {
			name: '数据'
		}
	})
	console.log(vm.$) // "数据"
	console.log() // "数据"
</script>

4、methods选项

methods属性用于定义方法，通过 Vue 实例可以直接访问这些方法。在定义的方法中，this指向 Vue 实例本身。

代码示例如下：

var vm = new Vue({
  data: { a: 1 },
  methods: {
  	// 定义plus()方法
    plus: function () {
      this.a++
    }
  }
})
vm.plus() // 调用plus()方法
vm.a // 2

5、computed选项(计算属性)

当有一些数据需要随着其他数据的变动而变动时，就需要使用computed计算属性。this指向的 Vue 实例的计算属性的结果会被缓存起来，只有依赖的响应式属性变化时，才会重新计算，更新计算属性的结果。

代码示例如下：

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设值
    aPlus: {
      // getter，默认
      get: function () {
        return this.a + 1
      },
      // setter
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

6、watch选项(状态监听)

Vue 提供了 watch 状态监听功能，只需监听当前 Vue 实例中的数据变化，就会调用当前数据所绑定的事件处理方法。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性(property)。

代码示例如下：

var vm = new Vue({
  data: {
    a: 1
  },
  watch: {
    // 监听 a 的变化
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    }
  }
})
vm.a = 2 // => new: 2, old: 1

7、filters选项(过滤器)

1、在插值表达式中使用过滤器
{{data}}语法，就是插值表达式。通过在插值表达式中使用过滤器来对数据进行处理，其语法为{{data | filter}}，符号|称为管道符，管道符前面代码执行的结果会传到后面作为参数进行处理。

代码示例如下：

<div id="app">
	<div>{{message | toUpcase}}</div>
</div>

<script>
	var vm = new Vue({
		el: '#app',
		data: {
			message: 'helloworld'
		},
		filters: {
			// 将 helloworld 转换为 HELLOWORLD
			toUpcase(value) {
				return value ? value.toUpperCase() : ''
			}
		}
	})
</script>
// 运行结果：=> "HELLOWORLD"

2、在v-bind 指令中使用过滤器
语法示例：v-bind：id="data | filter"

代码示例：

<div id="app">
	<div v-bind: id="dataId | formatId">helloworld</div>
</div>

<script>
	var vm = new Vue({
		el: '#app',
		data: {
			dataId: 'dff1'
		},
		filters: {
			// 字符串处理
			formatId(value) {
				return value ? value.charAt(1) + value.indexOf('d') : ''
			}
		}
	})
</script>
// 运行结果：=> "<div id="f0">helloworld</div>"

二、Vue数据绑定

1、绑定样式

1）绑定内联样式
在Vue实例data中定义的数据，可以通过v-bind将样式数据绑定给 DOM 元素。

代码示例如下：

<div id="app">
	<!-- 绑定样式属性值 -->
	<div v-bind: style="{backgroundColor: pink,width:width,height:height}">
		<!-- 绑定样式对象 -->
		<div v-bind: style="myDiv"></div>
	</div>
</div>

<script>
	var vm = new Vue({
		el: '#app',
		data: {
			// 内层Div
			myDiv: {
				backgroundColor：'red',
				width: '100px',
				height: '100px'
			},
			// 外层Div
			pink: 'pink',
			width: '100%',
			height: '200px'
		}
	})
</script>

在上述代码中，内层div的样式是通过绑定myDiv样式对象实现的，外层div的样式是通过绑定 data 数据中定义的样式属性名实现的。

2）绑定样式类
样式类即以类名定义元素的样式。

代码示例如下：

// 相应样式
.box{
	background-color: pink;
	width: 100%;
	height: 200px;
}
.inner{
	background-color: red;
	width: 100px;
	height: 50px;
	border: 2px solid white;
}

<div id="app">
	<!-- 外层Div -->
	<div v-bind: class="{{box}}">我是box
		<!-- 两个内层Div -->
		<div v-bind: class="{{inner}}">我是inner1</div>
		<div v-bing: class="{{inner}}">我是inner2</div>
	</div>
</div>

<script>
	var vm = new Vue({
		el: '#app',
		data: {
			box: 'box',
			inner: 'inner'
		}
	})
</script>

在上述代码中，box样式为外部div结构样式，其背景色为粉色；inner样式为内部div结构样式，其背景色为红色。

2、内置指令

Vue 提供了一些内置指令，通过使用内置指令可以用更简洁的代码来实现复杂的功能。常用的内置指令如下表：

指令	说明
v-model	双向数据绑定
v-bind	单向数据绑定
v-text	插入文本内容
v-html	插入包含HTML的内容
v-on	监听事件
v-for	列表渲染
v-if	条件渲染
v-show	显示隐藏

Vue的内置指令书写规则：以v开头，后缀用以区分指令的功能，且通过短横线连接。指令必须写在DOM元素上。内置指令还可以使用简写方式，比如，v-on: click 可简写为@click，v-bind: class 可简写为: class。

1、v-model
v-model主要实现数据双向绑定，通常用在表单元素上，例如input、textarea、select等。

代码示例如下：

<div id="app">
	<input type="text" v-model="msg" />
</div>

<script>
	var vm = new Vue({
		el: '#app',
		data: {
			msg: 'this is a v-model 指令'
		}
	})
	vm.msg // ==> “this is a v-model 指令”
</script>

2、v-bind
v-bind可以实现单向数据绑定。

代码示例如下：

<div id="app">
	<input type="text" v-bind: value="msg" />
</div>

<script>
	var vm = new Vue({
		el: '#app',
		data: {
			msg: 'this is a v-bind 指令'
		}
	})
	vm.msg // ==> “this is a v-bind 指令”
</script>

3、v-text
v-text是在DOM元素内部插入文本内容。

代码示例如下：

<div id="app">
	<p v-text="msg"></p>
</div>

<script>
	var vm = new Vue({
		el: '#app',
		data: {
			msg: 'this is a v-text 指令'
		}
	})
	vm.msg // ==> “this is a v-text 指令”
</script>

4、v-html
v-html是在DOM元素内部插入HTML标签内容。

代码示例如下：

<div id="app">
	<div v-html="msg"></div>
</div>

<script>
	var vm = new Vue({
		el: '#app',
		data: {
			msg: '<h2>this is a v-html 指令</h2>'
		}
	})
	vm.msg // ==> “this is a v-html 指令”
</script>

5、v-on
v-on是事件监听指令，直接与事件类型配合使用。

代码示例如下：

<div id="app">
	<p>{{msg}}</p>
	<button v-on: click="showInfo">请单击</button>
</div>

<script>
	var vm = new Vue({
		el: '#app',
		data: {
			msg: '请单击按钮查看内容'
		},
		methods: {
			showInfo() {
				this.msg = 'this is a v-on 指令'
			}
		}
	})
	// 运行结果：
	// 单击按钮前 ==> “请单击按钮查看内容”
	// 单击按钮后 ==> “this is a v-on 指令”
</script>

6、v-for
v-for可以实现页面列表渲染，常用来循环数组。

代码示例如下：

<div id="app">
	<div v-for="(item,key) in list" data-id="key">
		索引是：{{key}}，元素内容是：{{item}}
	</div>
</div>

<script>
	var vm = new Vue({
		el: '#app',
		data: {
			list: [1,2,3]
		}
	})
</script>
// 运行结果：
// 索引是：0，元素内容是：1
// 索引是：1，元素内容是：2
// 索引是：2，元素内容是：3

7、v-if 和 v-show
v-if用来控制元素显示或隐藏，属性为布尔值。v-show可以实现与v-if同样的效果，但是v-show是操作元素的display属性，而v-if会对元素进行删除和重新创建，所以v-if在性能上不如v-show。

代码示例如下：

<div id="app">
	<div v-if="isShow" style="background-color: #ccc;">
		我是v-if
	</div>
	<button @click="isShow=!isShow">显示/隐藏</button>
</div>

<script>
	var vm = new Vue({
		el: '#app',
		data: {
			isShow：true
		}
	})
</script>

在上述代码中，可将v-if替换为v-show，展示结果将有所不同。

参考资料：
1、Vue 2.x API 文档 2、Vue 2.x 官方教程文档 3、《Vue.js 前端开发实战》，黑马程序员.

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：加速度传感器的滤波python 加速度滤波算法

下一篇：一台服务器上的几个Java程序是一个进程还是多个进程服务器最多有几个进程

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯