vue

2023-12-29 08:40:22

一、

基本代码
{{变量}} v-text v-html

<html>
<head>
<meta charset="utf-8">
	<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue111">
	<!-- 直接显示 -->
	<h1>{{site}}<h1>
	<p>{{site2}}</p>
	<p v-text="site2"></p>
	<!-- 会解析变量中的html标签 -->
	<div v-html="site2"></div>
<div>
<script type="text/javascript">
	var vm = new vue(
		{
			el:'#vue111',
			data:{
				site:"hello",
				site2:"<h2>hello</h2>"
			}
		}
	)
</script>
</body>
</html>

绑定指令
v-bind:class 绑定class样式
v-bind:href 绑定url地址
v-bind:id 绑定id
判断指令
v-if 根据值判断是否显示该标签
v-else if else判断
v-else-if else-if判断
v-else和v-else-if必须跟在v-if或者v-else-if后面
v-show 也可以根据指令判断展示元素
双向数据绑定
```
<input v-model="message">
```
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

触发事件指令

<a v-on:click="method">
<form v-on:submit.prevent="onSubmit"></form>

过滤器

<div id="app">
  {{ message | capitalize }}
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

常用指令缩写
v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

8.v-if 与 v-show 的区别？

在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
v-if 是动态添加，当值为 false 时，是完全移除该元素，即 dom 树中不存在该元素。

v-show 仅是隐藏 / 显示，值为 false 时，该元素依旧存在于 dom 树中。若其原有样式设置了 display: none 则会导致其无法正常显示。

关于内容可见性问题：

当元素被包含在已被 vue 实例化之后的组件中时浏览器会正常渲染可以用 v-if=“false” 隐藏浏览器不会解析，不能使用 v-show。
当存在于未被 vue 实例化的组件中时可以正常隐藏，天生 display：none。

<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="app">
<template v-show="use">
		<div v-text="haha"></div>
	</template>
	<template v-if="use">
		<div v-text="haha"></div>
	</template>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
	  haha:"哈哈"
  }
});
</script>
</body>
	```
	当use为false，v-use不生效

9. 循环语句
v-for=site in sites
sites为实际存在的变量，site是源数据组，并且是sites迭代的别名
v-for 可以遍历集合，也可以遍历对象

  v-for="value" in object
	{{value}}

		v-for="(value,key) in object"
		{{key}}:{{value}}

	v-for="(value, key, index) in object"
	{{index}}:{{key}}:{{value}}

v-for标签中的参数位置代表的属性依次为value,key,index，即使参数名称改变，所代表的的属性也不变

遍历整数

v-for="n in 10"

计算属性关键词：computed
用于处理一些复杂的逻辑,通过getter和setter方法设置参数的值，默认属性为getter方法，不过也可以提供setter方法

var vm = new vue(
	el:"#app",
	data:{
		message:"Runnob!"
	},
	computed:{
		      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
	}
);
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

运行结果

11. computed vs methods
我们可以使用methods代替computed，效果上两个都是一样的，computed依赖缓存，依赖不变，结果就不会发生改变，methods每次执行都会重新调用方法，相对来说computed效率更高
12. 监听事件

<body>
<script type="text/javascript">
var vm = new Vue(
	el:'#app',
	data:{
		count:1
		
	}
);
<!-- vm调用监听方法，监听参数count的变化，方法中的第一个参数为变化后的，第二个为原数据 -->
vm.$watch('count',function(a,b){
	alert(a+'---'+b);
});
</script>
<div id="app">
	<p>计数器：{{count}}</p>
	<button @click="count++">点击</button>
</div>
<body>

监听的几种写法watch
vue对象内置

var vm = new Vue(
	el : '#app',
	data : {
		count : 1
	}
	watch : {
	<!-- 方法中第一个参数为新值，可以添加第二个参数为旧值 -->
		count: function(newValue){
			alert('修改后的数据为:'+newValue);
		}
	}
	<!-- 第二种写法 -->
		watch : {
	<!-- 方法中第一个参数为新值，可以添加第二个参数为旧值 -->
		count(newValue){
			alert('修改后的数据为:'+newValue);
		}
	}

	);
		<!-- 第三种写法 使用实例方法的方式-->
		vm.$watch('count', function (newValue, oldValue) {
    // 这个回调将在 vm.kilometers 改变后调用
    document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
})

watch默认第一次绑定的时候不会执行，只有在值发生改变的时候才会执行，如果需要绑定的时候执行，可以使用以下写法

watch: {
	userName: {
		handler (newName, oldName) {
			console.log(newName)
		},
		immediate: true
	}
}

码农公寓

相关文章