vue-基础
项目的注意事项：
1.template必须是一个且必须有一个跟元素
2.导入的时候 webpack默认 导出的整个组件 整个组件包含了 data 言外之意
整个组件包含了 你所要导出的对象
3.一个vue的实例只能挂载一个标签。
1.插值表达式：
{{数据}} 在data里面 data(){
return {
..
}
}
注意点：
1.插值表达式可以支持运算
2.插值表达式可以支持三元表达式
3.插值表达式可以是字符串
4.数据必须在data中定义，否则无效
5.插值表达式不可以在属性里面
6.但是不能使用语句 if for
指令：
一个标签的命令，有特殊含义：特点：以v-开头 说明是vue的指令。
指令：写在当前标签里面 注意只对当前标签起作用。
注意点：
1.在指令的后面不需要加{{}}
v-if v-else v-else-if 最终这个指令的目的就是让元素创建与删除。
使用1：
我是span元素1
我是span元素2
使用2：
注意点：
1.必须要先写v-if在写v-else
2.v-if可以单独存在， 但是 v-else不可以
3.v-if 和 v-else 必须是兄弟关系
4.如果不想让结构变化&显示多个标签 外侧使用template包裹
v-bind:
作用：1.给标签做属性绑定的。
语法：
v-bind:属性='值'
:属性='值'
注意点:
如果属性值是一个路径的形式，那么要么 require形式 要么import导入
// imgSrc:require('./assets/logo.png'),
import imgSrc from './assets/logo.png'
imgSrc:imgSrc,
img :src='imgSrc'
@click事件：
语法：
<button @click='name="rose"'>点击
<button @click="addCount">点击让count+1 {{count}}
<button @click="addCounts(5)">点击让count+5 {{count}}
注意点：
1.操作vue中的数据
1.1在视图层不需要加this
1.2在数据层必须要加this.属性||方法
2.@click后面跟的函数名 可以加() 可以不加 但是如果有参数的存在， 那么久必须要加参数。
3.如果没有传递参数 那么默认参数就是事件源参数 e
4.如果需要参数且需要事件源参数 那么传递的实参必须叫 $event
5.在methods里面不可以写箭头函数
事件修饰符：
<a :href="url" @click.prevent="">跳转
<!-- <div class="bigbox" @click="parentHandler">
parent
<div class="box" @click.stop="childrenHandler">children</div>
</div> -->
测试提交一次
========================================================
双向数据绑定：
<!-- 意味着 数据控制着 视图 视图控制着数据-----双向数据绑定 -->
<input type="text" v-model="msg"> <br>
<!-- 多选 -->
<!-- 使用： 1.v-model+数组 2.收集的是value的值 -->
<!-- 2.如果hobby不是数组 是基本数据类型 则含义：代表多选框的选中与没选中 -->
<!-- 注意点： -->
<!-- 不使用vue的时候 默认选中项是 checked 如果使用的v-model（true选中 false没选中） checked则无效 -->
<input type="checkbox" value="橘子" v-model="hobby">橘子
<input type="checkbox" value="苹果" v-model="hobby">苹果
<input type="checkbox" value="香蕉" v-model="hobby">香蕉 <br>
<!-- 单选：使用： 1v-model='值' 2.选中的时候获取的是value的值 如果value的值 和 变量相同则是默认选中的 -->
<input type="radio" value="男" v-model="sex">男
<input type="radio" value="女" v-model="sex">女 <br>
<!-- 下拉列表 -->
<select v-model='city'>
<option value="南京">南京</option>
<option value="上海">上海</option>
<option value="杭州">杭州</option>
<option value="北京">北京</option>
</select> <br>
<!-- 文本域 -->
<textarea v-model="values"></textarea>
======================================================================================================
v-model修饰符：
