vue知识点（1）

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

v-on指令添加一个事件监听器

div >
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

组件化应用构建

Vue.component('todo-item',{
	//todo-item组件现在接受一个
	//"prop",类似于一个自定义特性。
	props:['todo'],
	template:'<li>{{todo.text}}</li>'
})

组件的应用模板

<div >
	<app-nav></app-nav>
	<app-view>
		<app-sidebar></app-sidebar>
		<app-content></app-content>
	</app-view>
</div>

一个todo应用的组件树

根实例
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

数据与方法

Object.freeze()

  • 阻止修改现有的属性，也以意味着响应系统无法再追踪变化

      var obj = {
        foo: 'bar'
      }
      Object.freeze(obj)
      new Vue({
        el: '#app',
        data: obj
      })
      <div >
        <p>{{ foo }}</p>
        <!-- 这里的 `foo` 不会更新！ -->
        <button @click="foo = 'baz'">Change it</button>
      </div>

模板语法

插值

文本

  • 数据绑定最常见的形式就是使用"Mustache"语法(双大括号)的文本插值

Message:{{msg}}

  • Mustache标签将会被替代为对应数据对象上msg属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

原始HTML

  • 双大括号会将解释为普通文本，而非HTML代码。为了输出真正的HTML，你需要使用v-html指令
    html

      <p>Using mustaches: {{ rawHtml }}</p>
      <p>Using v-html directive: <span v-html="rawHtml"></span></p>

指令

v-bind修饰符

  • .prop被用于绑定DOM属性（property）

  • .camel (2.1.0)将kebab-case特性名转换为canmeCase(从2.1.0开始支持)

  • .sync(2.3.0)语法糖，会扩展成一个更新父组件绑定值的v-on侦听器

参数

  • 一些指令能够接收一个“参数”，在指令名称以后以冒号表示

  • v-bind指令可以用来响应式地更新HTML属性

      <a v-bind:href="url">...</a>
      //在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

v-bind缩写

    <!-- 完整语法 -->
    <a v-bind:href="url">...</a>
    <!-- 缩写 -->
    <a :href="url">...</a>

  • v-on指令，它用于监听dom事件

      <a v-on:click="doSomething">...</a>
      //在这里参数是监听的事件名

v-on缩写

    <!-- 完整语法 -->
    <a v-on:click="doSomething">...</a>
    <!-- 缩写 -->
    <a @click="doSomething">...</a>

计算属性和侦听器

计算属性

计算属性reversedMessage

  • 我们提供的函数将用作属性vm.reversedMessage的getter函数

      console.log(vm.reversedMessage) // => 'olleH'
      vm.message = 'Goodbye'
      console.log(vm.reversedMessage) // => 'eybdooG'

  • vm.reversedMessage的值始终取决于vm.message的值

计算属性的setter

  • 计算属性默认只有getter,不过在需要时你也可以提供一个setter：

      computed: {
        fullName: {
          // getter
          get: function () {
            return this.firstName + ' ' + this.lastName
          },
          // setter
          set: function (newValue) {
            var names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
          }
        }
      }

侦听属性watch

class与style绑定

绑定HTML Class

对象语法

  • 三元表达式

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

  • 这样写将始终添加 errorClass，但是只有在 isActive 是 truthy[1] 时才添加 activeClass。

  • 不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

      <div v-bind:class="[{ active: isActive }, errorClass]"></div>

以上是 vue知识点（1） 的全部内容， 来源链接： utcz.com/z/379611.html

回到顶部