vue学习－day01vue基本使用

vue简介

1. 概念：一套用于构建用户界面的前段框架
2. 特性：
   • 数据驱动视图
   • 双向数据绑定

vue的基本使用

//引入vue的js文件
<script src="./lib/vue-2.6.12.js"></script>
//声明一个vue控制的DOM区域，view区域
<div id="app"></div>
<script>
	//创建vue的实例对象，view－model区域
	const vm=new Vue({
		//对控制的区域进行绑定
		el:"#app",
		//数据源，model区域
		data:{}
	})

vue的指令

• 内容渲染指令：
  • 指令：v-text ; v-html ; {{}}
  • 作用：v-text会讲元素内部原有内容给覆盖；v-html会将包含HTML标签的字符串渲染为页面的html元素；｛｛｝｝插值表达式用来修改内容，放置于文本节点
• 属性绑定指令：
  • 指令：v-bind：，简写为：
• 事件绑定指令：
  • 指令：v-on：，简写为@
  • 事件修饰符：
    • .prevent：阻止默认行为
    • .stop：阻止冒泡
• 双向绑定指令：
  • 指令：v-model，常写在表单元素当中
  • 修饰符：
    • .number：表单输入的值自动转换为数值保存到data数据中
    • .lazy：在填完时再对data中的值进行修改
    • .trim：去掉输入的空白字符
• 列表渲染指令：
  • 指令：v-for=“item in list”，其中list是要渲染的数组数据名，这个指令常常搭配：key这个修饰符来使用，其中经常绑定id
• 条件渲染指令：
  • 指令：v-if, v-show
  • 两者区别：1、v-if：原理动态生成和删除元素；2、v-show：原理动态显示与隐藏元素

过滤器

• 简介：常用于文本格式化，常在插值表达式和v－bind绑定属性使用
• 使用：
  • <p>{{id | formid}}</p>其中 | 是管道符，formid为过滤函数
  • 过滤函数定义在Filters节点之下，必须要有return返回值，由于过滤函数是函数因此可以拿参数，但是函数体的第一个形参拿到的值是管道符前面那个值，其他形参只能放到后面，才是拿到其他值
  • 过滤函数分类：
    • 1、私有过滤器：单独定义在Filters节点下的过滤器，因为只属于实例对象
    • 2、全局过滤器：vue 创建出来的实例对象都可以使用，类似于java中的静态方法
    • 使用：
    • Vue.filters('formid',function(str){ return str.charAt(0)}