Vue基础

el:挂载点

el是用来设置Vue实例挂载的元素
Vue实例的作用范围是el选中的元素以及其后代元素
el除了ID选择器可以使用其他的选择器，但是建议使用ID选择器
el除了DIV可以使用其他的标签（双标签），但是不能使用html和body标签

data:数据对象

data内除了字符串还可以用对象，数组等

Vue指令

基础

Vue指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。

v-text

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

默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容

内部支持写表达式

无论内容是什么，只会解析为文本

<div id="app">
    <h2 v-text="message + ‘!‘ ">姓名</h2>
    <h2>姓名：{{ message }}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
      el: "#app",
      data: {
        message: "mannoname",
      },
    });
</script>

v-html

v-html指令的作用是：设置元素的innerHtml

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

解析文本使用v-text，需要继续html结构使用v-html

<div id="app">
    <p v-html="message"></p>
    <p v-text="message"></p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
      el: "#app",
      data: {
        message: "<a href=‘https://www.baidu.com/‘>百度知道</a>",
      },
    });
</script>

v-on

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

写法：v-on:事件名="方法名"

事件名不需要写on

指令可以简写成@

绑定的方法在methods属性中

方法内部通过this关键字可以访问定义在data中的数据

<div id="app">
    <input type="button" value="点击v-on" v-on:click="doIt" />
    <input type="button" value="点击v-on简写" @click="doIt" />
    <input type="button" value="双击" @dblclick="doIt" />
    <h2 @click="changeCity">{{ city }}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      city: "台州",
    },
    methods: {
      doIt: function () {
        alert("hello Vue");
      },
      changeCity: function () {
        console.log(this.city);
        this.city += "到杭州";
      },
    },
  });
</script>

补充：传递自定义参数，事件修饰符

事件绑定的方法写成函数调用的形式，可以传入自定义参数

定义方法时需要定义形参来接收传入的实参

事件的后面跟上.修饰符可以对事件进行限制

例如.enter可以限制触发的按键为回车，更多事件修饰符查看(https://cn.vuejs.org/v2/api/?#v-on)

<div id="app">
  <input type="button" value="点击" @click="doThis(‘mannoname‘,‘fight‘)" />
  <input type="text" @keyup.enter="enterUp" />
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    methods: {
      doThis: function (name, status) {
        console.log(name);
        console.log(status);
      },
      enterUp: function () {
        console.log("hello Vue");
      },
    },
  });
</script>

v-show

v-show指令的作业是：根据真假切换元素的显示状态

原理是修改元素的display

指令后面的内容，最终都会被解析为布尔值

值为true元素显示，false隐藏

数据改变之后，对应元素的显示状态会同步更新

<div id="app">
    <button @click="toggleIsShow">切换显示</button>
    <button @click="addAge">增加</button>
    <img src="../v-html.jpg" alt="v-html" v-show="isShow" />
    <img src="../v-html.jpg" alt="v-html" v-show="age>=18" />
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      isShow: false,
      age: 17,
    },
    methods: {
      toggleIsShow: function () {
        this.isShow = !this.isShow;
      },
      addAge: function () {
        this.age++;
      },
    },
  });
</script>

v-if

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

原理是增删DOM元素

值为true，元素添加到DOM树中，false移除

一般需要频繁切换显示的使用v-show，反之使用v-if

<div id="app">
    <button @click="toggleIsShow">切换显示</button>
    <p v-if="isShow">不知道的人</p>
    <button @click="addAge">+1s</button>
    <h2 v-if="age>=35">不想活了？</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      isShow: false,
      age: 34,
    },
    methods: {
      toggleIsShow: function () {
        this.isShow = !this.isShow;
      },
      addAge: function () {
     	this.age++;
     },
    },
  });
</script>

v-bind

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

完整写法是v-bind:属性名

简写的话可以直接省略v-bind，只保留:属性名

需要动态的增删class建议使用对象的方式

<div id="app">
      <img v-bind:src="imgSrc"  />
      <br />
      <!-- v-bind简写 -->
      <img
        :src="imgSrc"
        
        :title="imgTitle+‘,你就知道！‘"
        :class="isActive?‘active‘:‘‘"
        @click="toggleActive"
      />
      <br />
      <!-- 对象方式增删class -->
      <img
        :src="imgSrc"
        
        :title="imgTitle+‘,你就知道！‘"
        :class="{active:isActive}"
        @click="toggleActive"
      />
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      imgSrc:
        "//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg",
      imgTitle: "百度一下",
      isActive: false,
    },
    methods: {
      toggleActive: function () {
        this.isActive = !this.isActive;
      },
    },
  });
</script>

v-for

v-for指令的作用是：根据数据生成列表结构

数组经常和v-for结合使用

语法是(item,index) in 数据

item和index可以结合其他指令一起使用

数组长度的更新会同步到页面上

    <div id="app">
      <button @click="add">添加数据</button>
      <button @click="remove">删除数据</button>
      <ul>
        <li v-for="(city,index) in cities">{{ index + 1 }}{{ city }}</li>
      </ul>
      <h2 v-for="maincity in mainCities" :title="maincity.id">
        {{ maincity.name }}
      </h2>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          cities: ["北京", "上海", "深圳", "广州"],
          mainCities: [
            {
              name: "北京",
              id: 100000,
            },
            {
              name: "上海",
              id: 200000,
            },
            {
              name: "深圳",
              id: 518000,
            },
          ],
        },
        methods: {
          add: function () {
            this.mainCities.push({
              name: "广州",
              id: 510000,
            });
          },
          remove: function () {
            this.mainCities.pop();
          },
        },
      });
    </script>

v-model

v-model指令的作用是：获取和设置表单元素的值

绑定的数据会和表单元素值相关联

意思是表单中的值改变，对应的data中的值也会变

    <div id="app">
      <input type="button" value="修改message" @click="changeMessage" />
      <input type="text" v-model="message" @keyup.enter="getMessage" />
      <h2>{{ message }}</h2>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "mannoname",
        },
        methods: {
          getMessage: function () {
            alert(this.message);
          },
          changeMessage: function () {
            this.message = "不知道的人";
          },
        },
      });
    </script>

Vue基础