Vue自建文档(部分)

数据驱动视图

驱动方法

	//导入Vue文件
<script src="Vue.js"></script>
//创建Vue实例对象
<script>
    const vm = new Vue({
//选择器表示控制区域,一般最外层加个div来对整个页面进行控制
        el:'#app',
//数据源
        data:{

	    username:'张三',
	    info:'<h1>hello world!</h1>'
	},
//定义事件方法
	methods: {
	    add: function() {
		vm.count += 1; //vm.操作对象 对data中的数据进行操作
				//可用this.操作对象,对data中的数据进行修改
				//对dom数据源进行操作,参考v-on的tip
	    }
	    add(){}//可以进行简写
	}
    })
</script>

v-test=" "

值渲染到当前标签内部
会覆盖标签内容
不能插入带有标签的字符串
	<p v-test="<h1>123</h1>"><p>	//错误

{

插值表达式
可以直接写到标签内部
不能写到属性内部作为值,正确使用v-bind
	<p placeholder="{{username}}"></p>  //错误
	<p placeholder="username"></p>	//正确
类似模板字符串使用,不会覆盖内容	//placeholder提示信息
	<p>{{info}}<p>	//正确
插值可以运算
	<div>{{tips.split('').reverse().join('')}}</div>

v-html=""

插入带标签的内容
会覆盖当前标签内内容

v-bind:

动态绑定属性值
	<p v-bind:placeholder="tips"></p>  //正确
	<p :placehoder="tips"></p>  //正确简写
	<p :title="'box' + tip"></p> //可以进行拼接,注意引号双包单

v-on

事件绑定指令
	<button v-on:click="add"></button>
	<button v-on:click="add(2)"></button>//绑定事件时可对函数进行传参,方法要有形参
	<button @click="add"></button>//可以用@进行简写v-on:
Tip:
	如果绑定事件不传参则会默认传一个e形参对象,target则是绑定的事件源
	如果要操作dom元素标签则通过e.target.style.backgroundColor = "red"
	同理如果传参了,则没有target这个绑定事件源
	如果传参了还想要e.target,则如下带上$event
	<button v-on:click="add(2,$event)"></button>
	同时methods方法中为add(n,e),n接受传参,e拥有target事件源可操作dom

v-on事件使用

v-on:click	原生事件=>>	onclick
v-on:input	原生事件=>>	oninput
v-on:keyup	原生事件=>>	onkeyup

关于a链接阻止默认跳转行为

methods ->
	e.preventDefault();	//原生js方法
	<a href="http://www.baidu.com" @click.prevent="show">不跳转到百度</a>//vue使用事件修饰符进行触发控制

关于form表单submit自动提交的问题

有事通过对表单的查询操作需要点击查询按钮,而表单默认是提交刷新,而此行为在前端更改则不需要提交刷新,则可以通过阻止submit的提交行为
eg:
    <form @submit.prevent="add"></form>

methods ->
add(){
    if(this.brand === '') {
    	alert("请输入品牌名称!");
	return;
    }else {
	//执行搜索操作
    }
}

关于查询操作的实现

1.在用户点击查询时,对input输入内容进行个格式化处理(前后无空格v-model.tirm='')
2.处理后进行判断用户是否输入内容
3.对用户内容进行相应名称检索并输出检索结果的索引号
4.根据索引号输出结果

关于添加操作的实现

1.点击添加按钮,弹出信息收集表
2.对信息数据进行格式化判断(对用户输入进行动态绑定或延迟绑定)
3.处理表的显示和隐藏,(添加和编辑可以复用,但表名改变为编辑,有限信息修改,如密码)
4.判断格式正确后,进行添加方法构建
5.方法中创建一个和与数据格式一致的对象,并按需求导入添加的信息
6.在用户点击确定时,根据id进行一个后置添加或前置添加(可以设置一个nextid每添加一条就加一,删除一条则减一)

v-model

双向绑定指令,表单元素专用(radio,checkbox,select等等)
用来辅助开发者不操作dom来快速获取表单内容
<input type="text" v-model="username">
//data中的username的值将会随着文本框内容而改变,后面通过this.来进行获取data内容
//v-bind是单向绑定,data内部值改变会改变v-bind的内容,反之不会

v-if和v-show

条件渲染指令
<p v-if="flag">控制的内容</p>
//如果flag为flase,则删除,标签移除,页面重绘,不适合频繁使用,但实际开发还是用if,方便,不差钱

<p v-show="flag">控制的内容</p>
//如果flag为flase,则隐藏,标签还在,频繁使用性能好

data ->
	flag:true

v-if的配件

v-else需要配合v-if,否则不生效,示例如下:
	<div v-if="type === 'A'">优秀</div>
	<div v-else-if="type === 'B'">优秀</div>
	<div v-else-if="type === 'C'">优秀</div>
	<div v-else>优秀</div>

v-for

列表渲染指令,辅助开发者基于一个数组来循环渲染列表
需要使用item in items的的特殊语法
item支持第二个参数,为当前项索引eg: (item, index) in items 用法如下
语法如下:
data ->
	list:[{id: 1, name: 'abc'},{id: 2, name: 'qwe'}]
页面内容 ->
<ul>
	<li v-for="item in list" >姓名是: {{item.name}</li>

	<li v-for="(item, index) in list">当前索引是: {{ index }</li>

	<table>
	<tr v-for="(item, index) in list"  :title="item.name + index">
	<table>			//item和index也可以被自身标签调用

	<li v-for="item in list" :key="item.id">ID是: {{item.ID}</li>
	//官方推荐绑定ID为key的值作为,且vue文件不加key会警告,只能为string和number类型
	//string为key不能保证唯一性,也不太推荐
	//index索引为key不推荐,不具有唯一性,索引可能会因为v-if等改变格局的指令删除或添加而改变,容易造成复选框错乱
</ul>

表格案例

表格案例
内容 ->
<table>
	<tr v-for="item in list">
	    <td>{{ item.id }}</td>
	    <td>{{ item.name }}</td>
	</tr>
	<tr v-for="(item, index) in list"  :title="item.name + index">
					//item和index也可以被自身标签使用
	    <td>索引是{{ index }}</td>
	    <td>{{ item.id }}</td>
	    <td>{{ item.name }}</td>
	</tr>
</table>
data ->
	list:[
	    {id: 1, name: "张三"}
	    {id: 2, name: "李四"}
	]

关于label中for复选框的问题

在使用v-for中(item, index) in list动态生成复选框时,for属性值决定此复选框状态,动态生成时,要根据id的值动态为for赋名
eg:
<table v-for="item in list" :key="item.id">
    <div>
	<input type="checkbox" :for="'cb' + item.id" v-model="item.stauts">
	<label :for="'cb' + item.id" v-if="item.status">开启</label>
	<label :for="'cb' + item.id" v-else>关闭</input>
    </div>
</table>
data ->
    list:[
	{id: 1, status: true}
	{id: 2, status: flase}
    ]