vue随笔

 v-if ：   vue中的条件的判断一般使用      

v-for：用于vue中的遍历                    官方语言：可以绑定数组的数据来渲染一个项目列表

v-on:添加事件监听器    例如click onmouseover

v-on:click="reverseMessage"

 

reverseMessage：是方法的名字，方法定义在methods里面

 

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', {
  template: '<li>这是个待办项</li>'
})

 

template：里面定义的是html里面的标签

 

父组件和子组件之间的数据传递

 

 

v-bind:key是为了在v-for循环中给 Vue 一个提示，以便它能跟踪每个节点的身份

，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

 

 

 

 

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

 父组件可以获取子组件的值通过prop

<todo-item

v-for="item in groceryList"

//利用for遍历数组 得到数组中的值
v-bind:todo="item"

//将从数组中得到的值出传送到todo中
v-bind:key="item.id">

   //为每一个值绑定独一无二的标记
</todo-item>

最后实现父子组件的通信

 

数据一般放在data中

使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。

 

$，以便与用户定义的属性区分开来

 

 

 

实例生命周期钩子

Vue 实例在被创建时都要经过一系列的初始化过程

在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

 

 created 钩子可以用来在一个实例被创建之后执行代码：

如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

 

vue的模板语法

 

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

常用于模板插值

 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新

原始的html 

 

原始 HTML

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

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

Using mustaches: <span style="color: red">This should be red.</span>

Using v-html directive: This should be red.

不能使用 v-html 来复合局部模板，

vbind：用来绑定属性 

 

修饰符

 

v-bind缩写为 ：

 

v-on 缩写 @

 

 

计算属性和侦听器

 

<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div>

var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } })

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

 

<div id="message-event-example" class="demo">
  <p v-for="msg in messages">{{ msg }}</p>
  <button-message v-on:message="handleMessage"></button-message>
</div>

 

 

父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。