咸糖记录编程的地方

念念不忘,必有回响。

目录
vue基础
/  

vue基础

声明式渲染

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

message 指的是app.message 的属性

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息!
  </span>
</div>  

v-bind 叫做指令 将tilte特性和 Vue 实例的 message 属性保持一致”。

条件与循环

v-if="seen"seen设置为false的时候就不会看到

v-for 控制for循环 将data 中的todos属性通过for 循环渲染出来

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

处理用户输入

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>

在v-on 上添加一个监听器
他通过调用vue实例上的方法

method指的是vue的方法
然后我们可以修改他的方法

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

数据绑定

v-model感觉就是值

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

组件

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

component 是一个组件 他将注册一个todo-item标签 然后这个标签具有template可以动态修改内容 props是一个自定义的东西

Vue实例

Object.freeze(obj)使其元素不会改变

生命周期:给了用户在不同阶段添加自己的代码的机会。 不要在选项属性或回调上使用箭头函数

模板语法

v-once :只能一次插值
v-html :输出真正的 HTML 而不是普通的文本

支持javascript表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

指令

指令特性
的值预期是单个 JavaScript 表达式

参数

<a v-bind:href="url">...</a>将vue实例的
属性url作为参数传入
<a v-on:click="doSomething">...</a> 将vue实例的方法作为 onclick属性传入

缩写

v-bind 缩写

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

<!-- 缩写 -->
<a :href="url">...</a>

v-on 缩写

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

<!-- 缩写 -->
<a @click="doSomething">...</a>

计算属性缓存 vs 方法

计算属性缓存 就相当于python给方法加的porpery属性,但是不同的是 他是在依赖改变的基础上才会改变值 可以说是惰性的
所以叫做缓存 适合重复计算较大的应用

组件

  • 因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。
  • 组件可以进行任意次数的复用
  • 因为你每用一次组件,就会有一个它的新实例被创建。

  • data 必须是一个函数
    这样每个实例都能返回对象属性的 独立拷贝

全局注册:

Vue.component('my-component-name', {
  // ... options ...
})


标题:vue基础
作者:xiantang
地址:http://xiantang.info/articles/2019/06/03/1559551134576.html

评论