vue实例对象及其元素释意以及vue3指令

本文链接：https://blog.csdn.net/qq_63524487/article/details/130494557

Vue实例是Vue框架中的核心组成部分，包括el指定挂载元素，data用于存储和响应数据，methods定义可调用的方法。在组件中，data必须是函数以确保每个组件的独立性。文章还介绍了Vue中的指令，如v-model实现双向数据绑定，v-bind和v-on用于属性绑定和事件监听，以及v-if/v-else、v-for进行条件渲染和循环渲染。

摘要由CSDN通过智能技术生成

什么是vue实例

类似于创建一个对象,里面包含钩子函数,data,methods.components等
vue实例的对象data 主要是用来存放数据的 Vue框架会检测data的数据变化,自动更新到html上

vue实例中包含

el

官方解释
类型：string | Element
限制：只在用 new 创建实例时生效。
详细：
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
在实例挂载之后，元素可以用 vm.$el 访问。
如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。

简单来说el的作用就是表明我们要将当前vue组件生成的实例插入到页面的哪个元素中，el属性的值可以是css选择器的字符串，或者直接就是对应的元素对象。并且只能在使用new生成实例时才能配置el属性，而我们在组件中只是export一个配置对象，如果设置了el则会报错。

data

官方解释
类型： Object | Function
限制：组件的定义只接受 function

由描述可知，data 的本质是一个对象，或者一个函数，但是当data在组件中的时候，一定得是一个函数，正如我们经常写的

new Vue({
    el:'#app',
    data:{
        varOne:1,
        varTwo:2,
        varThree:3
    }
})

但是在组件中，定义的data必须是函数类型，例子如下

Vue.component('myComponent',{
    props:[],
    data:function(){
        return {
            varOne:1,
            varTwo:2,
            varThree:3
        }
    }
})

为什么在组件中，data是一个函数？
因为如果将data设计为一个对象时，所有的组件实例都会使用data属性，任意一个组件修改了data就会影响到其他组件的data，造成数据混乱。如果定义为一个function，每个组件都会生成各自的data属性。这就就不会相互影响，解耦开了。

data中的数据类型可以是字符串类型，也可以是json类型，也可以是数组类型，可以通过{{}}来取出来，例子如下

<body>
	<div id="app">
	  <h1>{{message}}</h1>
	  <h2>{{student.name}}{{student.age}}</h2>
	  <ul>
	     <li>{{address[0]}}</li>
	     <li>{{address[1]}}</li>
	     <li>{{address[2]}}</li>
	  </ul>
	</div>
	<!--导入vue.js-->
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
	// 创建vue实例
	var myVue=new Vue({     
		el:"#app", 
		data:{      //vue实例用到的数据
			message:"河南科技大学!",
			student:{
				name:"张三",
				age:"19"
			},
			address:["洛阳","郑州","开封","新乡"]
		}
	})
	</script>
</body>

methods

基本语法

var vm = new Vue({
    methods:{
        // 在此时定义方法，方法之间使用逗号分隔
        方法名:function(){}
});

在方法中访问属性

在 methods 方法中访问 data 的数据，可以直接通过 this.属性名的形式来访问。

例：例如我们在 show 方法中，访问 number 属性，可以直接通过 this.number 形式访问，其中 this 表示的就是Vue 实例对象：

<script>
  new Vue({
    el: '#app',
    data(){
      return{
        number: 100
      }
    },
    methods:{
      show: function(){
        console.log(this.number);
      }
    }
  });
</script>

小例子

<body>
	<div id="app">
	  {{message}}{{showInfo()}}	  
	</div>
	<!--导入vue.js-->
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
	// 创建vue实例
	var myVue=new Vue({     
		el:"#app",  //挂在元素
		data:{      //vue实例用到的数据
			name:"尤雨溪",
			message:"欢迎您学习Vue！"
		},
		methods:{
            showInfo:function(){
            	return this.name+this.message;
            } 
		}
	})
	document.write(myVue.message);
	document.write(myVue.showInfo());
	</script>
</body>

效果图
在这里插入图片描述
经测试先执行的是{{message}}{{showInfo()}}然后执行的document.write(myVue.message); document.write(myVue.showInfo());

vue3中指令解释及其使用

在这里插入图片描述

使用 v-model 指令实现表单数据双向绑定：

<template>
  <div>
    <input type="text" v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

使用 v-bind(v-bind可以省略) 指令将 Vue 实例的数据绑定到 HTML 元素的属性上：

<template>
  <div>
    <img v-bind:src="imageSrc">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg'
    }
  }
}
</script>

使用 v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件：

<template>
  <div>
    <p v-if="showMessage">Hello Vue!</p>
    <p v-else>Goodbye Vue!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMessage: true
    }
  }
}
</script>

使用 v-for 指令根据数组的属性值循环渲染元素或组件：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    }
  }
}
</script>

使用 v-on (v-on:可以用@替换)指令在 HTML 元素上绑定事件监听器：

<template>
  <button v-on:click="onClick">Click me</button>
</template>

<script>
export default {
  methods: {
    onClick() {
      alert('Button clicked!')
    }
  }
}
</script>

以下是一个使用 v-show 指令的示例：

<template>
  <div>
    <button v-on:click="showMessage = !showMessage">Toggle Message</button>
    <p v-show="showMessage">Hello Vue!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMessage: true
    }
  }
}
</script>

插值表达式、v-text、v-html实现数据绑定

<body>
	<div id="app">
	  <h1>{{message+"!!!"}}软件学院</h1>
	  <h1>{{number+10}}软件学院</h1>
	  <h1 v-text="message+'!!!'">软件学院</h1>
	  <h1 v-text="number+10">软件学院</h1>
	  <h1 v-text="5>3?'真':'假'">软件学院</h1>
	  <h1 v-html="info+'!!!'">软件学院</h1>
	  <h1 v-text="link"></h1>
	  <h1 v-html="link"></h1>
	</div>
	<!--导入vue.js-->
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
	// 创建vue实例
	var myVue=new Vue({     
		el:"#app", 
		data:{      //vue实例用到的数据
			message:"河南科技大学",
			info:"<i>河南洛阳</i>",
			link:"<a href='http://www.haust.edu.cn'>河南科技大学</a>",
			number:0
		}
	})
	</script>
</body>