Vue的基本应用

最新推荐文章于 2024-02-04 14:52:21 发布

沉碎.

最新推荐文章于 2024-02-04 14:52:21 发布

阅读量365

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/CrtLife/article/details/116205868

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

插值

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<template>
  <div id="app">
    
    <h1>{{msg}}</h1>
  </div>
</template>

<script>


export default {
  name: 'App',
  data(){
    return{
      msg:"你好"
    }
  }
  
}
</script>

Mustache 标签将会被替代为对应数据对象上 msg 值。无论何时，绑定的数据对象上 msg 的值发生了改变，插值处的内容都会更新。

通过使用 v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。：

<span v-once>这个将不会改变: {{ msg }}</span>

计算属性

计算属性和方法

实例：

<template>
  <div id="app">
    <h1>{{msg}}</h1>
    <button @click="show">点击我看看！</button>
    <h2>{{ms}}</h2>
    <h3>{{full}}</h3>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      msg:"你好",
      ms:"不好"
    }
  },
  methods:{
    show(){
      this.msg="不好";
    }
  },
  //计算属性
  computed:{
    full(){
      //如果当 msg 或者 ms 中任何一个值发生改变时就会冲新触发次函数 所以h3 中的值也会改变
      //从而实现动态渲染
      return this.msg+' '+this.ms
    }
  }
}
</script>

在方法中

<p>Reversed message: "{{ reversedMessage() }}"</p>

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

计算属性的 setter

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

当运行 fullName = ‘John Doe’ 时，setter 会被调用，firstName 和 lastName 也会相应地被更新。

侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<template>
  <div id="app">
    
    <h1>{{msg}}</h1>
    <button @click="show">点击我看看！</button>
    <h2>{{ms}}</h2>
    <h3>{{full}}</h3>
  </div>
</template>

<script>


export default {
  name: 'App',
  data(){
    return{
      msg:"你好",
      ms:"不好"
    }
  },
  methods:{
    show(){
      this.msg="不好三生三世";
    }
  },
  computed:{
    full(){
      return this.msg+' '+this.ms
    }
  },
  watch:{
    //用于监听 msg 当msg的值发生改变时会自动调用该函数
    msg(){
      this.ms="真好"
    }
  }
}
</script>

侦听器还可监听路由的变化watch:{ '$route'(){ //函数体 } }当浏览器的地址发生改变时会自动调用该函数，比如可以在函数体内执行异步操作重新渲染数据。

指令

v-for

实例：

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    items: [
      { message: '张三' },
      { message: '李四' }
    ]
  }
})

结果：
在这里插入图片描述

还可以用于绑定对象：

<ul>
      <li v-for="value in obj" :key=value>
        {{value}}
      </li>
    </ul>

data() {
    return {
      obj:{
        id:1,
        name:'张三',
        age:20
      }
    };
  },

输出结果：
在这里插入图片描述

Vue提供的更新数组的方法

变更方法：更新数组不会反回一个新数组

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

替换数组：会放回一个新数组
例如：

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

v-model

<p>{{ message }}</p>
<br>
<textarea v-model="message"></textarea>

v-model 会自动绑定表单中的value值，从而实现双向数据绑定。
v-model一般在表单中使用

v-bind

<div
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

data: {
  isActive: true,
  hasError: false
}

结果渲染：

<div class="active"></div>

v-bind 常用于属性绑定例如 :url :id :class等

v-on

v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
实例：

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

也可以将处理函数放到methods 中，用于处理复杂的逻辑。
v-on的简写： @click=""

filter

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app" >
			<input type="text" name="" v-model="msg" />
			<div  id="">
				{{msg | msgFilter}}
			</div>
		
		</div>

		<script src="vue.js" type="text/javascript">
		</script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					msg: '',
				},
				filters: {  //局部过滤
					datas(value) {
						return value.replace(/[#,*,%]/g, '')
					}
				},
				methods:{
					
				}
			})
			//全局过滤
			Vue.filter('msgFilter', (value) => {
				return value.replace(/[#,*,%]/g, '')
			})
		</script>
	</body>
</html>

动态参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.act{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app" >
			<input type="text" v-model="even"  /> <a href="#" @[even]="change"	 :class="{act:isActive}">我是a标签</a>
		</div>

		<script src="vue.js" type="text/javascript">
		</script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					msg: '',
					isActive:true,
					even:''
				},
				methods:{
					change(){
						this.isActive=!this.isActive
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

沉碎.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Vue的基本应用

1. 插值数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：<template> <div id="app"> <h1>{{msg}}</h1> </div></template><script>export default { name: 'App', data(){ return{ msg:"你好" } }
复制链接

扫一扫

专栏目录