vue的使用

本文先介绍一下vue.js的使用，后续会有关于vue脚手架vue-cli的使用

安装

• 可以直接用< script>引入
  直接在官网下载到本地后然后用< script>标签引入，我一般都用这种
• CDN引入
  推荐：https://cdn.jsdelivr.net/npm/vue 会保持和 npm 发布的最新的版本一致
• NPM安装
  • 安装npm，需要先安装node，npm就自动安装好了
  • 安装vue

    npm install vue

Vue实例

在引入vue.js后就要创建Vue实例，然后就可以开始使用vue了

• 创建一个vue的实例
  1.创建挂载点 html元素

  <div id="app">
  	<div @click="published">{{message}}</div>
  	// 组件使用
  	<todo-item 
  		v-for="(item, index) of list"
  		:key = "index"
  		// 父组件向子组件传值用属性
  		:content = "item"
  	></todo-item>
  </div>

2.在js中编写代码

var app = new Vue({
	// 将id为app的元素创建为一个Vue实例，就可以在该元素里使用vue，在元素外使用vue会报错
	el: '#app',
	// 局部组件需要定义
	components: {
		'todo-item': TodoItem
	}
	// 数据
	data: {
		message: '',
		list: [],
		count: 0
	},
	// 计算属性  可以直接使用 messageNum，相当于data中的数据
	computed: {
		// 计算属性的 getter
		messageNum: function () {
			return 200 - this.message.length;
		}
	},
	// 侦听器   侦听message的变化，一旦数据发生变化可以进行操作
	watch: {
		message: function() {
			this.count ++;
		}
	},
	// 方法
	methods: {
		// 发表评论
		published: function(){
			console.log(this.message);
		},
		// 初始化数据
		initDate: function(){
			console.log('请求接口');
		}
	},
	// vue生命周期，created是实例在生成后执行，可以用来初始化数据
	created: function(){
		this.initDate()
	}
	// 全局组件   可以在项目中的任何地方使用
	Vue.component('todo-item', {
		// 子组件获取父组件传的值
		props: ['content'],
		template: '<li>{{content}}</li>'
	})
	// 局部组件
	var TodoItem = {
		template: '<li>item</li>'
	}
})

模板语法

• 使用data数据
  在html中使用data里的数据：
  eg：

  <span>{{message}}</span>

• 使用指令
  常用的指令有

  v-model:数据双向绑定
  v-if:条件渲染
  v-for:列表渲染
  v-bind:属性的值是动态的要使用 eg：v-bind:src='' 可缩写为 :src
  v-on:监听事件 可缩写为 @click="函数名()"

用法

<span v-if="message">{{message}}</span>

父子组件传值

父子组件用props传值 引用的是父组件

• 父组件传值：

  <appmain :noLeft="true"></appmain>

noLeft也可以写在data中，动态传值

• 子组件接受值：

  props: {
      noLeft: {
        type: Boolean,    //类型
        default: false     //默认值
      }
  }

可以在子组件中直接使用noLeft

:class="{noLeft: noLeft}"

赏

谢谢你请我吃糖果

支付宝

微信