【Vue学习记录1】vue入门、基本标签

1 vue入门

1.0 vue安装

安装教程

1.1 el:挂载点

el是用来设置Vue实例挂载（管理)的元素

Vue实例的作用范围是什么呢?
——Vue会管理el选项命中的元素及其内部的后代元素

是否可以使用其他的选择器?
——可以使用其他的选择器,但是建议使用ID选择器

是否可以设置其他的dom元素呢?
——可以使用其他的双标签,不能使用HTML和BODY

1.2 data

Vue中用到的数据定义在data中

-data中可以写复杂类型的数据
-渲染复杂类型数据时,遵守js的语法即可

2 vue指令

v-text：直接替换标签内容，所有值都视为文本
v-html：直接替换标签内容，可以解析标签
v-on：绑定事件监听器（缩写：@）——查看vue文档：修饰符

v-show：切换元素的显示和隐藏（修改display）
v-if：切换元素的显示和隐藏（修改dom树）
v-bind：为标签属性绑定动态内容（缩写：：）

2.1 内容绑定，事件绑定

2.1.1 v-text

v-text指令的作用是:设置标签的内容(textContent)

-默认写法，直接替换标签内容（使用差值表达式{{}}可以替换指定内容）
-内部支持写表达式

2.1.2 v-html

v-html指令的作用是:设置元素的innerHTML

-内容中有html结构会被解析为标签
-v-text指令无论内容是什么,只会解析为文本

例1：

<p v-htm1="content"></p>
<p v-text="content"></p>

var app = new Vue({
el : "#app",
data:{
	 content:"黑马程序员"
})

例2：

<p v-htm1="content"></p>
<p v-text="content"></p>

var app = new Vue({
el : "#app",
data:{
	 content: "<a href='http: //www.itheima.com'>黑马程序员</a>}
})

2.1.3 v-on/@（method）

Vue中的方法定义在method中

v-on指令的作用是:为元素绑定事件

-事件名不需要写on
-指令可以简写为@
-绑定的方法定义在methods属性中
-方法内部通过this关键字可以访问定义在data中数据

2.1.4 小例子

-创建Vue示例时:el(挂载点),data(数据),methods(方法)
-v-on指令的作用是绑定事件,简写为@
-方法中通过this,关键字获取data中的数据
-v-text指令的作用是:设置元素的文本值,简写为{{}}

2.2 显示切换，属性绑定

2.2.1 v-show

根据表达值的真假,切换元素的显示和隐藏
v-show指令的作用是:根据真假切换元素的显示状态

-原理是修改元素的display,实现显示隐藏
-指令后面的内容,最终都会解析为布尔值
-值为true元素显示,值为false元素隐藏
-数据改变之后，对应元素的显示状态会同步更新

2.2.2 v-if

v-if指令的作用是:根据表达式的真假切换元素的显示状态

本质是通过操纵dom元素来切换显示状态
表达式的值为true,元素存在于dom树中,为false,从dom树中移除

2.2.3 v-bind

v-bind指令的作用是:为元素绑定属性

-完整写法是v-bind:属性名
-简写的话可以直接省略v-bind,只保留:属性名
-需要动态的增删class建议使用对象的方式

html方法
<img src="../assets/img/background.jpg"/>

方便管理的v-bind
<img :src="img1"/>
data:{
    img1："../assets/img/background.jpg"
}

2.2.4 示例-图片切换

列表数据使用数组保存
v-bind指令可以设置元素属性比如src
v-show和v-if都可以切换元素的显示状态,频繁切换用v-show

2.3.1 v-for

2.3.2 v-on补充 -----------------未学

2.3.3v-model 双向绑定