Vue

1. 第一个vue程序 helloworld

引入vue的CDN库存

编写view

  1. {{ message}}


创建vue对象 并添加model
var vm=new Vue({

  1. el:"#app"<br />    ,data:{<br />        message:'2315'<br />    }<br />});<br />双向绑定， 改变model数据 可以不用更改视图 数据动态更改。

2. 常用属性

2.1. V-bind

V-bind开头的都被称为指令 可缩写 比如 v-bind:href 等价于:href


鼠标悬停几秒钟查看此处动态绑定的提示信息！

var app2 = new Vue({
el: ‘#app-2’
, data: {
message: ‘页面加载于 ‘ + new Date().toLocaleString()
}
})；
这里我们遇到了一点新东西。你看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。
如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = '``新消息'，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。
比如：v-bind:id v-bind:disabled 作用在属性上的 可以 用v-bind代替大括号

2.2. 条件与循环

2.2.1. V-if

当我们需要控制元素是否需要显示的时候 也非常的简单。

  1. <p v-if="seen">现在你看到我了</p>


varapp3 =newVue({

  1. el: '#app-3',
  1. data: {
  1. seen: true
  1. }
  1. })


简单的代码就可以实现了，通过data（model）的seen属性值和v-if标签配合就可以轻松实现。
通过浏览器的控制台app3.seen = false p标签元素就会消失了。

2.2.2. V-for

我们时常会用到循环结构

  1. <ol>
  1. <li v-for="todo in todos">
  1. {{ todo.text }}
  1. </li>
  1. </ol></div>

varapp4 =newVue({

  1. el: '#app-4',
  1. data: {
  1. todos: [
  1. { text: '学习 JavaScript' },
  1. { text: '学习 Vue' },
  1. { text: '整个牛项目' }
  1. ]
  1. }
  1. })

通过data定义数组的属性 可以在标签属性中添加v-for=”todo in todos” 类似mybatis动态sql的格式。
当然 当在控制台 输入 app4.todos.push({ text: ‘新项目’ }) 动态的添加数组内容时 也会更新view的。

2.3. V-on

通过v-on 添加事件监听器： 缩写等价于 @click

  1. <p>{{ message }}</p>
  1. <button v-on:click="reverseMessage">反转消息</button></div>

varapp5 =newVue({

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


Vue中 可以添加 methods 用来添加编写我们的业务function。Submit事件监听

…

2.4. V-model

V-model属性可以用来表单输入和应用状态的双向绑定。

  1. <p>{{ message }}</p>
  1. <input v-model="message"></div>

varapp6 =newVue({

  1. el: '#app-6',
  1. data: {
  1. message: 'Hello Vue!'
  1. }
  1. })

运行会后发现 可以动态改变 message属性的值。

2.5. V-once

保证值不会被改变
这个将不会改变: {{ msg }}

2.6. V-html

双大括号 会被解析成原始的文本，如果想要解析html这个会是不错的选择

Using mustaches: {{ rawHtml }}


Using v-html directive:


vue - 图1

3. 组件化应用构建

每个组件封装成一个单独的模块 模块之间可以相互使用，复用。像极了spring的ioc作用之一。一处创建 到处使用。
vue - 图2
在vue中，一个组件 本质上就是一个拥有预定义选项的实例，在vue中注册组件及其简单：
// 定义名为 todo-item 的新组件

  1. Vue.component('todo-item', {
  1. template: '<li>这是个待办项</li>'
  1. })

varapp =newVue(...)
现在你可以用它构建另一个组件模板：

    1. <!-- 创建一个 todo-item 组件的实例 -->
    1. <todo-item></todo-item></ol>


    但是呢 这样发现每次使用这个模块 都会渲染同样的内容 这样不太酷。
    于是：

    1. <ol>
    1. <!--
    1.   现在我们为每个 todo-item 提供 todo 对象<br />      todo 对象是变量，即其内容可以是动态的。<br />      我们也需要为每个组件提供一个“key”，稍后再<br />      作详细解释。<br />    -->
    1. <todo-item
    1.   v-for="item in groceryList"<br />      v-bind:todo="item"<br />      v-bind:key="item.id"<br />    ></todo-item>
    1. </ol></div>
    1. Vue.component('todo-item', {
    1. props: ['todo'],
    1. template: '<li>{{ todo.text }}</li>'
    1. })

    varapp7 =newVue({

    1. el: '#app-7',
    1. data: {
    1. groceryList: [
    1. { id: 0, text: '蔬菜' },
    1. { id: 1, text: '奶酪' },
    1. { id: 2, text: '随便其它什么人吃的东西' }
    1. ]
    1. }
    1. })

    todo-item:作为组件载体 v-for 表示组件需要循环 并提供循环属性，v-bind:todo 指定每次传入的对象 名称和 props需要一致。

    4. 数据与方法

    Vue实例暴露了一些有用的实例property和方法，他们都有前缀$
    var data = { a: 1 }
    var vm = new Vue({
    el: ‘#example’, data: data })
    vm.$data === data // => true
    vm.$el === document.getElementById(‘example’) // => true
    // $watch 是一个实例方法
    vm.$watch(‘a’, function (newValue, oldValue) {
    // 这个回调将在 vm.a 改变后调用
    })

    5. 生命周期

    5.1. Created

    实例被创建之后执行的方法
    new Vue({
    data: { a: 1 }
    , created: function () {
    // this 指向 vm 实例
    console.log(‘a is: ‘ + this.a)
    }
    })

    5.2. Mounted

    对象创建之后执行

    5.3. Updated

    修改对象时候

    5.4. Destroyed

    6. JavaScript表达式

    支持js表达式的运算
    {{ number + 1 }}
    {{ ok ? ‘YES’ : ‘NO’ }}
    {{ message.split(‘’).reverse().join(‘’) }}

    7. 计算属性

    Js表达式如果写在大括号中 会很繁重
    应当使用计算属性


    {{ reversedMessage }}



    var vm = new Vue({
    el: ‘#example’
    , data: { message: ‘Hello’ }
    , computed: {
    // 计算属性的 getter
    reversedMessage: function () {
    // this 指向 vm 实例
    return this.message.split(‘’).reverse().join(‘’)
    } } })
    计算属性是响应式的 计算结果会被缓存 如果不想缓存 可以通过 大括号调用method也可以。

    • 不想搞了，感觉还是vue官网比较全面没必要自己做笔记了。