【vue】vue2.5的使用

简单的vue实例包含一个index.html主页文件，一个vue.js框架文件。

一、标签数据绑定：引用实例中data数据；

1、插值表达式，<div>{{msg}}</div>

2、v-text='data中属性名'，<div v-text="msg"></div>

3、v-html='data中属性名'，<div v-html="msg"></div>

二、标签属性绑定：将实例data中属性名绑定到挂载点属性；

v-bind:属性名="data中属性名"，<div v-bind:title="title">鼠标放上显示</div>

三、数据双向绑定：可以更改实例中数据；

v-model="实例data中属性名"，<input v-model="content" />

四、子组件的创建与挂载

创建1、简单项目中子组件可以在index.html中直接创建名为'todo-item'的子组件。(相当于挂载2中引用组件)

Vue.component('todo-item',{
			props:['content','index'],
			template:'<li @click="handleClick">{{content}}</li>',
			methods:{
				handleClick:function(){
					this.$emit('delete',this.index)
				                      }
			        }

		          })

创建2、大型项目以vue-cli为工具，直接创建新的.vue文件来书写子组件。

包括：

模板<template></template>

逻辑<script></script>

样式<style></style>

 挂载1、在根组件中直接引用以子组件为名的标签。（相当于挂载2中引用模板）

 <div id='root'><todo-item></todo-item></div>

挂载2、在<script>标签中引入名为'APP1'的组件所在文件，引用组件，再引用组件模板。

import App1 from './App1'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App1 },
  template: '<App1/>'
})