Vue.js总结学习(指令、计算属性、数据绑定)

特点:
1.轻量型,不依赖于任何其他库
2.双向数据绑定,简单方便
3.内置的简单指令(V-*),也可以自定义指令
4.插件化:其核心不包含router,ajax,表单验证等功能
5.内置过滤器和自定义过滤器
6.不支持低端浏览器(IE6/7/8)

数据绑定:

1.文本插值

使用双大括号 {{ }} ,其会把里面的值当做字符串来处理

<span>text:{{text}}</span>

如果是HTML片段,则可以使用三个大括号

<span>Logo:{{{logo}}}</span>
logo:'<span>abcd</span>'

双大括号还可以放在HTML标签内

<span data-id='{{id}}'></span>

2.表达式
表达式是各种数值、变量、运算符的综合体

<---js表达式--->
{{ count / 100 }}   //在原值的基础上除以100
{{ true ? 1 : 0 }}  //值为真则渲染1,否则为0
{{ explemt.split(',') }}
{{ explemt | toUpperCase}}  //vue允许过滤器,toUpperCase就是过滤器
{{ explemt | filterA | filterB}}    //允许过滤器串联
{{ explemt | filter a b}}   //过滤器允许传参,这里a b 均为参数

3.指令
指令是带有v-前缀的特殊特性,其值限定为绑定表达式。指令的作用是当表达式的值发生变化时,这个变化也将反映到DOM上。

<div v-if='show'>DESW</div>     //当show为true时显示 DESW 字样,否则则不显示

内部指令

这里写图片描述
1.1 v-if 根据表达式的值在dom中生成或移除一个元素
这里写图片描述

<body>
    <div id='example'>
        <p v-if='greeting'>Hello</p>
    </div>
</body>
<script>
    var exampleVME = new Vue({
        el:'#example',
        data:{
            greeting :true
        }
    })
</script>

1.2 v-show 根据表达式的值来显示或隐藏HTML元素,简单的基于CSS的切换
这里写图片描述
p标签的Hello是根据 greeting 的值来显示的

1.3 v-else 必须跟着v-if或者 v-show 使用
这里写图片描述 这里写图片描述
利用v-show 代替 v-else,在判断条件加个非运算符 !
这里写图片描述 这里写图片描述

1.4 v-model 主要用在input 、select 、text 、checkbox、radio等表单控件元素上的双向数据绑定

扫描二维码关注公众号,回复: 2609657 查看本文章
<body>
    <div id='example'>
        <form action="">
            <p>姓名:
                <input type="text" v-model='data.name'>
            </p>
            <p>性别:
                <input type="radio" id='man' v-model='data.sex' value="one"><input type="radio" id='woman' v-model='data.sex' value="two"></p>
            <p>兴趣:
                <input type="checkbox" v-model='data.interest' value="book">图书
                <input type="checkbox" v-model='data.interest' value="swim">游泳
                <input type="checkbox" v-model='data.interest' value="game">游戏
                <input type="checkbox" v-model='data.interest' value="pingpong">乒乓球
            </p>
            <p>身份:
            <select v-model='data.identity'>
                <option value="teacher" selected>教师</option>
                <option value="lawyer">律师</option>
            </select>
            </p>
        </form>
    </div>
</body>
<script>
    var exampleVME = new Vue({
        el:'#example',
        data:{
            data:{
                name:'王二麻子',
                sex:'one',
                interest:['swim'],
                identity:'teacher'
            }
        }
    })
</script>

这里写图片描述
1.5 v-for 对数组或对象进行渲染
v-for 还支持一个可选的第二个参数为当前项的索引。
也可以用 of 替代 in 作为分隔符,因为它是最接近 JavaScript 迭代器的语法:

 <div id="list">
        <ul>
            <li v-for='(value,key) in list'>{{key}}:{{value}}</li>
        </ul>
    </div>
 <script>
    var exampleVME3 = new Vue({
        el:'#list',
        data:{
           list:{
               '姓名':'mary',
               '性别':'男',
               '年龄':'14'
           }
        }
    })
 </script>

这里写图片描述
变异方法
Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
1.6 v-bind 操作元素的 class 列表和内联样式
我们可以传给 v-bind:class 一个对象,以动态地切换 class,

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
<script>
    var exampleVME3 = new Vue({
       el:'#list',
       data: {
          isActive: true,
          hasError: false
        }
    })
 </script>

结果为:

<div class="static active"></div>

也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式:

<div id='examleBox'>
    <div v-bind:class="classObject"></div>
</div>
<script>
var exampleVME3 = new Vue({
        el:'#examleBox',
        data: {
          isActive: true,
          error: null
        },
        computed: {
          classObject: function () {
            return {
              active: this.isActive && !this.error,
              'text-danger': this.error && this.error.type === 'fatal'
            }
          }
        }
  })
 </script>

结果为:

<div class="active"></div>

这里写图片描述
也可以把一个数组传给 v-bind:class,以应用一个 class 列表:

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

结果为:

<div class="active text-danger"></div>

也可以根据条件切换列表中的 class,可以用三元表达式:

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

再举个栗子:
这里写图片描述

  <div id='exampleBox'>
           a={{ a }}, b={{ b }}
  </div>
  <script>
   var exampleVME4 = new Vue({
        el:'#exampleBox',
        data: {
            a: 1
          },
          computed: {
            // 一个计算属性的 getter
            b: function () {
              // `this` 指向 vm 实例
              return this.a + 1
            }
          }
    })
  </script>

1.7 v-on 绑定事件监听器
使用在普通元素上,只能监听原生dom事件,使用在自定义组件上,也可以监听子组件触发的自定义事件。
这里写图片描述

<div id="example-1">
        <button v-on:click="counter += 1">Add {{counter}}</button>
        <p>点击一下加 {{ counter }}</p>
        <input type="text" v-model='counter'>
</div>
<script>
 var example1 = new Vue({
        el: '#example-1',
        data: {
            counter: 0
        }
    })
</script>

v-on 还可以接收一个需要调用的方法名称。

  <div id="example-2">
        <!-- `greet` 是在下面定义的方法名 -->
        <button v-on:click="greet">Greet</button>
  </div>
  <script>
   var example2 = new Vue({
        el: '#example-2',
        data: {
            name: 'Vue.js'
        },
        // 在 `methods` 对象中定义方法
        methods: {
            greet: function (event) {
            // `this` 在方法里指向当前 Vue 实例
            alert('Hello ' + this.name + '!')
            // `event` 是原生 DOM 事件
                if (event) {
                    alert(event.target.tagName)
                }
            }
        }
    })
    // 也可以用 JavaScript 直接调用方法
    // example2.greet() // => 'Hello Vue.js!'
    </script>

内联处理器的方法,传递参数:

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
<script>
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)     //hi 和 what 作为参数传递给了say函数
    }
  }
})
</script>

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法:

 <div id="example-2">
            <button v-on:click="warn('这是一个按钮地啊你.', $event)">Submit</button>
 </div>
 <script>
   var example2 = new Vue({
        el: '#example-2',
        // 在 `methods` 对象中定义方法
        methods: {
            warn: function (message, event) {
              // 现在我们可以访问原生事件对象
              if (event) event.preventDefault()
              alert(message)
            }
          }
    })
 </script>

事件修饰符:修饰符是由点开头的指令后缀来表示的。

  • stop
  • prevent
  • capture
  • self
  • once
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 @click.prevent.self 会阻止所有的点击,而 @click.self.prevent 只会阻止对元素自身的点击。

vue 2.1.4 新增:

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

vue计算属性 ,setter 和 getter
当输入框的值发生改变时,计算属性会依次计算得出相应结果渲染到elment上面

<div id="app1">
<!--   桌腿数量用type= range 选择器,绑定变量legsCount-->
    <label>
        桌腿数量: <input type="range" v-model="legsCount">
    </label>
<!--    桌子数量 绑定变量tableCount,并且输入数量时触发update -->
    <label>
        桌子数量: <input type="text" @input = "update" :value="tableCount">
    </label>
<!--   统计结果 -->
    <output>
        我们将要做 {{legsCount}}桌腿,组成 {{tableCount}} 桌子
    </output>
</div>
<script>
var ABC = new Vue({
        el: '#app1',
        data () {
            return {
                legsCount: 0
            }
        },
        computed: {
            tableCount: {
                get () {
                    return this.legsCount / 4;
                },
                set (newValue) {
                    this.legsCount = newValue * 4; 
                }
            }
        },
        methods: {
            update (e) {
                this.tableCount = e.target.value
            }
        }
    })
</script>

这里写图片描述这里写图片描述

猜你喜欢

转载自blog.csdn.net/Amy_cloud/article/details/79351079
今日推荐