VUE入门一

最新推荐文章于 2025-01-24 18:10:09 发布

奈若何er

最新推荐文章于 2025-01-24 18:10:09 发布

阅读量763

点赞数 25

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/asdhls/article/details/136327122

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

vue入门一

基础指令学习
- 组合式API
六、QUESTION

基础指令学习

1、文本绑定

<body>
<!-- demo 测试 --> 
	<div id="hello-vue" class="demo">{{ message }}</div>
	<script>
	const messageApp = {
		data() {
			return {
				message : 'hello world!!!'
			}
		}
	}
	Vue.createApp(messageApp).mount('#hello-vue')
	</script>
</body>

2、v-model指令

用于表单控件和Vue实例的数据之间建立双向数据帮绑定；可以在表单控件元素上创建双向数据绑定，自动更新绑定的元素值。

// css中包含.calss1的配置
<div id="app">
  <label>修改颜色</label><input type="checkbox" v-model="use" id="r1"> // v-model实现组件和实例数据双向绑定，通过checkbox改变use的值
  <br>
  <div v-bind:class="{'class1': use}"> // 此处use值受checkbox框选的影响
    v-bind:class 指令
  </div>
</div>   
<script>
const app = {
  data() {
    return {
      use: false
    }
  }
} 
Vue.createA...
</script>

3、v-bind指令

用于将Vue实例的数据绑定到HTML元素的属性上

<div id="app">
	{{56+4}}<br>
	{{ok? 'ok' : 'not ok'}}<br>
	{{ message.split('!').reverse().join('-')}}
	{{Math.random()}}    /* 可计算随机数 */
<br>
	<span v-bind:id="'list-' + id">这是个新信息</span>	
</div>

<script>
	const vueApp = { data() { return { ok: true, message: 'RUNOOB!!', id: 1  } } }
</script>
// vue为两个最为常用的指令设计了缩写 可省略v-bind
<a :href="url"/>

v-bind 指令被用来响应地更新 HTML 属性：
表达式会在当前活动实例的作用域下作为javaScript被解析。同时每个绑定只能包含单个表达式，不能使用语句或者流程控制。

4、v-on指令

完整语法： <a v-on:click='doSomething'>...</a>
缩写语法： <a @click='doSomething'>...</a>
动态参数： <a @[event]='doSomething'></a>     // 这里参数是监听的事件名

修饰符

5、mehtods属性

<div id="app">
	<p>{{message}}</p>
	<button v-on:click="reverseMessage">反转</button> 
</div>

<script>
Vue.createApp({
	data() { return { message:'runboo!!!' } },
	methods: { reverseMessage() {this.message = this.message.split('').reverse().join('')} }
}).mount('#app')
</script>

methods是与data同级，并且键值中是函数，通过this.处理data()函数中的数据

6、v-once指令

不想改变标签的内容，可以通过v-once指令执行一次性插值，动态改变时不会刷新。

7、v-html指令

<span v-html='dataHtml'></span>

用于输出html语言

8、参数

参数在指令后以冒号指明

<span v-bind:href="url"></span>
<span v-for="item in items" :key="item.id"></span>

9、v-if指令

多个元素可以包裹在"<template//>"元素中，渲染时并不会加载template元素。用span块包裹，则会渲染span。
v-else 和 v-else-if 指令都需要在同一层级使用；v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

10、v-show指令

<p v-show="false"></p> 
相当于  style=“display:none”

组合式API

六、QUESTION

input框增加value属性后可以产生联动？
链接: link

<input type="radio" id="runoob" value="Runoob" v-model="picked">
  <label for="runoob">Runoob</label>
  <br>
  <input type="radio" id="google" value="Google" v-model="picked">
  <label for="google">Google</label>
  <br>
  <span>选中值为: {{ picked }}</span>

select标签中的v-model绑定的值最后加载，因此会忽略option中的selected属性；select中v-model绑定属性值是option中的value值，因此可以设置data()中selected属性和默认第一个选项的value相同来处理默认值。
钩子函数的几个调用时机？

指令定义函数提供了几个钩子函数（可选）：

created : 在绑定元素的属性或事件监听器被应用之前调用。
beforeMount : 指令第一次绑定到元素并且在挂载父组件之前调用。
mounted : 在绑定元素的父组件被挂载后调用。
beforeUpdate: 在更新包含组件的 VNode 之前调用。。
updated: 在包含组件的 VNode 及其子组件的 VNode 更新后调用。
beforeUnmount: 当指令与在绑定元素父组件卸载之前时，只调用一次。
unmounted: 当指令与元素解除绑定且父组件已卸载时，只调用一次。