Vue-----一，vue基础语法

最新推荐文章于 2023-09-21 18:57:12 发布

swu_fisher

最新推荐文章于 2023-09-21 18:57:12 发布

阅读量239

点赞数 1

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/qq_43336475/article/details/90084484

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一，挂载点

el:"#XXX"相当于绑定这个element

模板：挂载点内部的内容都叫做模板

template:""

实例：vue根据挂载点el，template,data自动生成内容

插值表达式：｛｛msg｝｝用data中的msg插入html中生成内容
或者用v-html="msg"显示content内的内容
或者v-text="msg"显示转译一遍后content中的内容

二，绑定事件

**v-on:**click=“XX”(XX应该写在vue中的method:｛XX:function(){｝}中)
v-on：==@
面向数据编程

三，属性绑定和双向绑定

单向绑定
v-bind :属性名=“XX”(XX应是Vue中的data中的某个数据)
v-bind: 等于 :
如：v-bind:title=“XX”,这个元素的title值就为XX，XX是data中的一个数据（title是这个元素固有的属性）
:content:“XX”，由于元素本来是没有content这个属性的，所以这个元素就获取到一个属性content，值为XX，但这只是传给了这个元素content：xx，还需要这个元素接收content，在这个组件的vue.component()中添加props:[‘content’]即可。
在这里插入图片描述
双向绑定
但以上的绑定都是单向绑定的，也就是vue中的data改变了，html中跟着改变，但html改变却不会影响Vue中的data
双向绑定v-model=“XX”(XX应是data中的一个属性)

四，计算属性和侦听器

计算属性：向Vue的实例中加computed:{XX:function(){}}(XX不能与data中的属性名一样)，在这个里可以进行计算（其他地方也能计算，不过这个地方的计算性能更高，像在没有改变的数据的情况下就使用缓存不会再计算一次）

侦听器：watch:{XX:function(){}} XX属性改变则执行function

五，v-if,v-show,v-for

v-if=“true/false” 为false时这个元素就从html中移除
v-show="true/false"为false时这个元素的display:none

v-for=“XX 0f YY” XX为每次遍历的数组的值，YY为数组
如：

<div id="root">
	<ul>
			<li v-for="item of list">{{item}}</li>
		</ul>
</div>
new Vue({
el:"#root",
data:{
list:[1,2,3],
}
})

效果如图=》在这里插入图片描述

六，组件拆分

全局组件：Vue.component(“XX”,{})然后就可以在HTML中使用作为一个标签了，这个标签就等于｛｝中的内容。

<div id="toDo">
        <ul>
            <todo-item> </todo-item>
        </ul>
    </div>
    
    <script type="text/javascript"> 
    Vue.component('todo-item',{   
            template:'<li>item</li>'
        })

        new Vue({
            el:'#toDo',
             
        });
    </script>

这样就定义好了全局组件todo-item
（需要注意的是如果定义组件的名字为如TodoItem,则应该使用其为<todo-item></todo-item>,如果名字为todo-item,则使用名字可以直接使用todo-item.）

局部组件：var XX={}这样无法直接使用，还需要在new Vue（）实例里面的conponents注册一个XX。

<div id="toDo">
        <ul>
			<todo-item></todo-item>
        </ul>
    </div>
    
    <script type="text/javascript">
var ToDoItem={
        	template:"<li>item</li>"
        }

        new Vue({
            el:'#toDo',
             components:{
             	"todo-item":ToDoItem
             },
        });
    </script>

这样就注册好了局部组件todo-item

这样就单独拆分开来了

七，组件与实例的关系

每一个组件都是一个Vue的实例（也就是每个组件都相当于一个new Vue({})，里面也可以写data，method，computed,watch等）

八，todolist实现删除功能

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> todoList编写</title>
	<script src="./js/vue.js"></script>
 </head>
<body>
    <div id="toDo">
    	<input type="text" v-model="inputValue">
    	<button @click="submit"></button>
        <ul>
            <todo-item v-for="(item,index) of list" 
            :key="index" 
            :content="item"
            :index="index"
            @delete="clickDelete"
            ></todo-item>
        </ul>
        <div>{{list}}</div>
    </div>
    
    <script type="text/javascript">

        //定义组件    这是全局组件，template里是模板，相当于定义一个标签
        Vue.component('todo-item',{
        	props:['content','index'],//接收外部传入的content数据
            template:'<li @click="handclick">{{content }}{{index}}</li>',
            methods:{
            	handclick:function(){
            		this.$emit('delete',this.index)
            	}
            }
        })

        new Vue({
            el:'#toDo',
             data:{
             	inputValue:" ",
             	list:[],
             },
             methods:{
             	submit:function(){
             		this.list.push(this.inputValue),
             		this.inputValue=" "
             	},
             	clickDelete:function(index){
             		this.list.splice(index,1)
             	}
             }
        });
    </script>
</body>
</html>