vue语法、属性、初识

我们要知道：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。数据经过Vue与DOM建立关联，所有的东西都是响应式的。

vue包含：
----------------------1.指令：v-开头。

-----v-bind：

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

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。

—v-for 指令可以绑定数组的数据来渲染一个项目列表：
—v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法
—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 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单。（后续补充）

2.Vue实例的创建

var vm = new Vue({
  // 选项
})

在实例创建的过程中，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。

var vm = new Vue({
  data: { xxxx}
})

当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。当你在后续过程中添加新的data:{b:89},它的改变并不会触发视图的改变。

3.生命周期钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

生命周期钩子的 this 上下文指向调用它的 Vue 实例。
①created
②mounted
③updated
④destroyed

扫描二维码关注公众号，回复： 4624224 查看本文章

4.模板语法：
一、插值：
①文本：

<span>Message: {{ msg }}</span>

绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

5.计算属性和监听器：
计算属性computed与方法methods最直观的不同是：
▲计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
▲相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

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

input的点击事件
v-on:click.lazy:不会实时更新，只有失去焦点的时候才会更新
v-model：双向数据绑定
v-model.trim 不管多少个空格都会输出一个空格
v-on：input

vue语法、属性、初识

猜你喜欢