Vue 探索 01

🚀

请留意

执行任务的script标签一定要放在靠下的位置

pre标签 使 代码块 格式化排版

选择器

【.】类选择器 【#】id选择器

---

v-指令：

v-text ：缺点会替换所有，一般使用插值表达式 ，拼接字符串请留意是单引号

<span v-text:"messgae1"></span>

<span v-text:"messgae2+'！！'"></span>

<span> {{ message +'!!'}} </span>

v-html:类似上面但是可以识别标签

v-on:绑定事件（简化版：@动作=”函数名”）请留意 js代码里的method和el同级

补充：事件修饰符 按键修饰符@keyup.enter

el: '#app',
     methods:{ 
        函数1:function(){
          console.log("我真的算Q")，
        函数2:function(){
          console.log("我真的算P")
        }

支持的动作有：

*click

*dblclick

待补充

---

在Vue中this指的是data中的成员

---

我的第一个应用：计算器

var app = new Vue({
    el: '#app',
    data: {
        num: 0
    },
    methods: {
        sub: function() {
            if (this.num > 0) { this.num -= 1 } else { alert("不能再少了") }

        },
        add: function() {
            if (this.num < 10) { this.num += 1 } else { alert("超过啦") }

        }
    }

})

---

v-show ：显示隐藏dom，并且具有逻辑判断，原理是修改display

v-if ：移除增添dom，并且具有逻辑判断，原理是remove，add（性能消耗大）

v-bind ：对应JS的操作标签的属性

写法1：【:属性=”{value:Key}”】留意：当Key为真时value才会生效

写法2：【:属性=”{Key？’value’:””}”】三目运算 意思是当Key真时value生效，否则返回空字符串

↑这里使用写法1有一个疑问：:src=”{value:key}”，不能直接使用变量，写法2可以正常，我猜想是{}的原因，导致无法找到url

我认为写法1{:}只能识别成字符串，变量不好整

---

v-for =”(it,index) in arr” 其中it是值，index是键， arr是数组

*数组经常结合v-for，是响应式的

---

v-model ：双向绑定数据 script和dom里的数据有一方改变 全局都会跟着变（便捷获取输入的值）