Vue学习1

el挂载点

1. Vue实例的作用范围是什么？

   Vue 会管理el选项命中的元素及其内部的后代元素

2. 是否可以使用其他选择器

   通常使用的“"#app"使用的是id选择器，像类选择器”.app“,标签选择器”div“,都可以使用，不过建议选择id选择器，只有一个

3. 是否可以设置其他的dom元素呢？Vue是否可以挂载到其他dom元素上，而不仅仅是div?

   可以挂载到其他的dom元素上(要求是双标签)，不能挂载到html 和body上

4. el的作用：用来设置Vue实例挂载(管理)的元素

data数据对象

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

2. data中可以写复杂类型的数据 (对象student(相当于python 中的字典)，数组，。。。)

3. 渲染复杂类型数据时，遵守js的语法即可( student.name 点，索引)

Vue指令

v-text

1. 作用：将数据设置为标签的文本值(设置元素的文本值)
2. 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
3. 内部支持写表达式
4. {{}}也是v-text 的一种形式，或者可称是其一种简写

v-text :就是一个属性而已

<div id="app">
    <h2 v-text ="msg" ></h2>
    <h2>深圳{{msg}}</h2>
    <!--这两种的区别是v-text属性 会把data中的对应数据覆盖h2标签的所有内容，是整体改变，而差值表达式{{}}是局部替换-->
</div>

<h2 v-text =" msg+‘!!‘" ></h2>
<h2>深圳{{msg+"biu"}}</h2>

v-html

1. 作用：设置标签的innerHTML

2. 内容中有html结构会被解析为标签

3. v-text 指令无论内容是什么，只会解析为文本

4. 解析文本使用v-text ，需要解析html结构使用v-html

v-on

1. 作用：为元素绑定事件
2. 事件名写什么？如果是点击事件，写 click ,如果的是 鼠标移入事件，写monseenter ，双击事件 dblclick 方法写在Vue实例的methods中
3. 无论什么事件共同的部分是 v-on: ,Vue提供了一种更简单的写法，支持 v-on：替换为 @

<div id="app">
    <input type="button" value = "事件绑定" v-on:事件名 = "方法" >
</div>

v-text v-html v- on 内容绑定 事件绑定

v-show

1. 根据表达式的真假，切换元素的显示和隐藏
2. 原理是修改元素的display,实现显示隐藏
3. 指令后面的内容，最终都会解析为布尔值
4. 值为true 元素显示，值为false 元素隐藏
5. 数据改变之后，对应元素的显示状态会同步更新

<div id="app">
    <!--三种形式-->
    <img src="地址" v-show = "true">
    <img src="地址" v-show = "isShow">
    <img src="地址" v-show = "age >=18">
</div>

var vm = new Vue({
    el:"#app",
    data:{
        isShow:true,
        age:16,
    }
})

v-if

1. 根据表达式的真假，切换元素的显示和隐藏(操纵dom元素)
2. 本质是通过操纵dom元素来切换显示状态
3. 表达式的值为true，元素存在于dom树中，为false,从dom树中移除
4. 与 v- show类似的作用,两者都有其差不多的三种形式
5. 两者的区别在于，v-if 为false的时候，会把该元素从dom树中移除，而v-show是操纵元素的display ，为false时，将display 设置为none。
6. 实际使用时，对于频繁使用的元素，用v-show,不经常使用的用v-if

v-bind

1. 设置元素的属性(比如src,title,class)
2. v-bind 指令的作用是：为元素绑定属性
3. 语法： v-bind: 属性名 = 表达式 或者 ：属性名 = 表达式
4. v-bind: 可简写为 ：
5. 如果设置的为class 更建议使用对象的形式而不是三元表达式

<div id="app">
    <img v-bind:src = "imgSrc">
    <img v-bind:title = "imgTitle"+"!!!!"> //可直接添加字符
    <img v-bind:class = "isActive? ‘active‘:‘‘"> //三元表达式
    <img v-bind:class = "{active:isActive}"> //对象形式
    
</div>

var vm = new Vue({
    el:"#app",
    data:{
        imgSrc:"图片地址",
        imgTitle:"黑马程序员",
        isActive:false
    }
})

原文：https://www.cnblogs.com/moshanghuai/p/13848986.html