vue基础（一）_vue @dst-CSDN博客

本文链接：https://blog.csdn.net/dst159/article/details/115217361

Vue基础

Vue
创建第一个Vue程序
- el
Vue基础知识（部分）

Vue

JavaScript框架
简化DOM操作
响应式数据驱动

创建第一个Vue程序

导入开发版本的vue.js
创建vue实例对象，设置el属性（挂载点）和data属性（数据对象）
使用简洁的模板语法把数据渲染到页面上

el

el是用来设置vue实例挂载（管理）的元素
Vue实例的作用范围：el命中的元素及其内部的后代元素
el是否可以使用其他的选择器：可以（选择器例如：id \class\div），但是建议使用ID选择器
el是否可以设置其他的DOM元素：可以使用其他的双标签，不能使用HTML和BODY

Vue基础知识（部分）

内容绑定，事件绑定（v-text,v-html,v-on基础）

v-text

v-text设置标签的文本值（textContent）

<div id="app">
         <!-- 会替换掉标签中间的所有内容 -->
        <h2 v-text="message"></h2>
        <!-- 可替换部分内容 -->
        <h2>深圳{{message}}</h2>
    </div>

v-html

v-html设置标签的innerHTML
如果是普通的文本则跟v-text没有任何区别，但如果是带标签的就会进行解析

v-on

为元素绑定事件
指令可以简写为@
绑定方法定义在methods属性中，方法中通过this关键字获取data中的数据
数据放在data属性中

 //html
  <input type="button" value="v-on指令" v-on:click = "doit">
  <input type="button" value="v-on指令简写" @click = "doit">
  
  //js
   var app = new Vue({
          el:"#app1",
          methods:{
            doit:function(){
                //逻辑
                alert("做IT")
            }
          }
      })

 <h2 @click = "changeFood">{{food}}</h2>
  <input type="button" value="换一个菜" v-on:click = "changeFood">

  var app = new Vue({
        el:"#app1",
        data:{
            food:"西红柿炒鸡蛋"
        },
        methods:{
            changeFood(){
               this.food="鱼香肉丝"
            }
        }
    })

计数器实例

<!-- 计数器实例 -->
    <div id="app2">
        <input type="button" value="-" @click = "minus">
        <span style="color: darkgray;">{{shuzi}}</span>
        <input type="button" value="+" @click = "add">

 var app = new Vue({
        el:"#app2",
        data:{
            shuzi:"1"
        },
        methods:{
            minus(){
                
                if(this.shuzi>0){
                 this.shuzi--;
                }else{
                    alert("别点啦，已经到最小值了！")
                }
            },
            add(){
                if(this.shuzi <10){
                     this.shuzi++;
                }else{
                    alert("别点啦，已经是最大啦！")
                }
               
            }
        }
    })