Vue基础学习（一）基本使用-优快云博客

本文链接：https://blog.youkuaiyun.com/Herb100/article/details/92011427

本文详细介绍了Vue.js的基本安装方法，核心概念如数据绑定、条件渲染、列表渲染、事件处理、组件系统等，并提供了实例代码，帮助读者快速掌握Vue.js的使用。

开始安装或引入可以直接在官网查看教程：https://cn.vuejs.org/v2/guide/

new Vue({
     el:"#root",
     template:'<h1>模板内容 {{content}}</h1>',
     components:{  'component_name':part_component_name,
        },
     data:{  content:'<h1> {{content}}</h1>'   },
     methods:{ functionName:function(){}  },
     watch:{ var:function(){} },
     computed:{  var:function(){} },
})

[el]：绑定html元素id
[template]：绑定元素的模板值,如果没有，则为绑定元素下的所有内容
[date]：数据
[methods]：事件方法

数据显示 {{ content }}
属性绑定 v-bind:attributeName | :attributeName
双向绑定 v-model (在页面上变量会同时改变)
事件 v-on:event | @event
数据绑定 v-once
原样输出 v-text
渲染输出 v-html
插入/移除dom元素 v-if=“true|false”
隐藏/显示dom元素 v-show=“true|false”
循环输出数组
<li v-for="item of lists">{{item}}</li>
<li v-for="item of lists" :key=>item>{{item}}</li>
<li v-for="(item,index) of lists" :key=>item>{{item}}</li>

全局组件

<todo-item v-for="(item,index) of list"   :key="index" :content="item">
{{item}}
</todo-item>

Vue.component('componet_name',{
	prop:['content'],
    template:'content'
})

局部组件（如果要使用则需要在new Vue里面的components注册）

   var TodoItem={
            template:'content'
   }

使用<componet_name></componet_name>

父子组件事件交互
父组件：订阅@event
子组件：发布$emit()
传值父name=“value” 子props:[]

Vue基础学习（一） 基本使用

Vue基础学习（一）基本使用