vue项目开发-1

最新推荐文章于 2023-11-18 14:06:49 发布

大勇任卷舒

最新推荐文章于 2023-11-18 14:06:49 发布

阅读量185

点赞数 3

分类专栏： web前端开发文章标签： vue.js

@大勇若怯任卷舒

本文链接：https://blog.csdn.net/m0_47454596/article/details/110086759

版权

web前端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue基本功能

表单绑定

用 v-model 指令在表单、及元素上创建双向数据绑定
- 它会根据控件类型自动选取正确的方法来更新元素
- 通过 JavaScript 在组件的 data 选项中声明初始值
文本
多行文本
model 指令的作用是将 input 元素 value 属性的值和创建的 Vue 对象中 value 的值进行绑定
- Vue 将这个值绑定后，在 input 中引起的 value 值变化就会实时反映到关联的 Vue 对象，所以引用的 {{ value }} 也会跟着变化
body当中使用v-model

		<div id="app">
			<input type="text" v-model="value" />
			<div>value的值是：{{ value }}</div>
		</div>

vue对象data属性指定元素

<script>
		var app = new Vue({
			el: '#app',
			data: function(){
				return {value: ""}
			}
		})
	</script>

事件绑定

body中使用v-on指令

		<div id="app">
...
			<input type="button" value="发送" v-on:click="send" />
		</div>

VUE对象中增加methods

		var app = new Vue({
...
			methods:{
				send: function(){
					alert("发送成功!")
					this.value = ''
				}
			}
		})

计算属性

对于任何复杂逻辑，你都应当使用计算属性
Vue 还可以根据绑定的数据做计算，然后引用计算的结果
- 假设想实时统计输入的字数，可以在 Vue 对象里加上对 value 长度的计算值
计算属性申明到 computed 对象里，这个对象的键是计算的结果，值是计算函数，这里计算了 value 的长度
- 可以使用 this.count 引用计算结果，也可以在关联的模板中直接引用，和绑定的数据value的用法非常类似
div标签指定绑定变量

		<div id="app">
...
			<div>字数：{{ count }}</div>
		</div>

实现computed对象，增加count属性

		var app = new Vue({
...
			computed:{ //计算属性
				count: function(){
					return this.value.length
				}
			}
		})

样式绑定

vue还可以动态地帮为元素绑定样式（class 属性）
- 实现： input 中没有任何值输入，即 value 的值为空时，input 的边框为红色以提醒用户没有内容
  - 首先写一个简单的样式，样式通常写到 head 标签里，用 style 包裹
  - 然后将这个 empty 用于 input 的 class 属性，浏览器就会渲染对应的样式
- vue会根据 empty 后的表达式 !count 的真假来判断 class 的值是否为 empty，如果为真（即 count = 0 的情况），则 class 的值为 empty，否则为空
head中添加style

	<head>
...
		<style>
			.empty {
				border-color: red;
			}
		</style>
	</head>

使用v-bind绑定样式

<input type="text" v-bind:class="{empty: !count}" v-model="value" />

功能01：methods增加判断

methods:{
				send: function(){
					if(!this.count){
						alert("请输入内容！")
						return
					}
...
				}
			},

功能02：条件渲染

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染

<h1 v-if="awesome">Vue is awesome!</h1>

v-else

<h1 v-if="awesome">Vue is awesome!</h1> 
<h1 v-else>Oh no 😢</h1>

v-else-if，顾名思义，充当 v-if 的“else-if 块”
用 key 管理可复用的元素
- 这两个元素是完全独立的，不要复用它们
条件渲染

		<div id="app">
...
			<div v-if="count">value的值是：{{ value }}</div>
		</div>

count非零的时候为真

项目实战

显示TODOS

创建vue对象，指定data对象

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
	var app = new Vue({
		el: '#todo-app',
		data: function(){
			return {
				todos:[
					{id:0, title:'学习vue'},
					{id:1, title:'工作汇报'},
				]
			}
		}
	})
</script>

修改li标签，使用v-for指令

  <ul>
    <li v-for="todo in todos" :key='todo.id'>
		<span>{{ todo.title }}</span>
...
    </li>

添加TODO

实现 addTodo 方法
- 方法声明在 Vue 对象的 methods 属性里
  - 生成一个新的 todo 对象，然后将其添加到 todos 列表里（使用push 方法把一个元素加入到数组的末尾），然后将用户的输入值清空
    - 注意 newTodoTitle 和输入框的 value 值是双向绑定的，任何一个值改变，相应的值都会跟着变
input输入
- 双向绑定，获取用户输入
- 绑定回车事件，调用函数

<input type="text" placeholder="添加 todo" v-model="newTodoTitle"
		@keyup.enter="addTodo"/>

vue对象，添加methods

<script>
	let id = 0
	var app = new Vue({
...
		data: function(){
			return {
				todos:[],
				newTodoTitle:'',
			}
		},
		methods:{
			addTodo:function(){
				this.todos.push({id: id++, title: this.newTodoTitle})
				this.newTodoTitle = ''
			}
		}
	})

功能03

methods:{
			addTodo:function(){
				if (this.newTodoTitle === ''){
					return
				}
...

功能04

增加样式

...
  <style>
...
	.empty {
		border-color: red;
	}
...

修改用户输入input

<div id="todo-app">
  <div>
...
    <input type="text" v-bind:class="{empty: emptyCheck}"
		placeholder="添加 todo" v-model="newTodoTitle"
		@keyup.enter="addTodo"/>
	<span v-if="emptyCheck" class="selected">请输入内容！</span>
...

Vue对象，增加emptyCheck计算属性，checkEmpty

<script>
	let id = 0
	var app = new Vue({
		el: '#todo-app',
		data: function(){
			return {
...
				checkEmpty: false,
...
		methods:{
			addTodo:function(){
				if (this.newTodoTitle === ''){
					this.checkEmpty = true;
					return
				}
...
				this.checkEmpty = false;
			}
		},
		computed:{ //计算属性
			emptyCheck: function(){
				return this.newTodoTitle.length === 0 && this.checkEmpty
			}
		}
...

大勇任卷舒

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue项目开发-1

Vue基本功能表单绑定用 v-model 指令在表单、及元素上创建双向数据绑定它会根据控件类型自动选取正确的方法来更新元素通过 JavaScript 在组件的 data 选项中声明初始值文本多行文本model 指令的作用是将 input 元素 value 属性的值和创建的 Vue 对象中 value 的值进行绑定Vue 将这个值绑定后，在 input 中引起的 value 值变化就会实时反映到关联的 Vue 对象，所以引用的 {{ value }} 也
复制链接

扫一扫