Vue:实践学习笔记(1)——快速使用

Vue基础知识

0.引入Vue

官方地址：Vue的官方下载地址

Vue推荐博客：keepfool

在你的程序中快速引入Vue：

<!-- 开发环境版本，包含了用帮助的命令行警告 -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

1.MVVM模式

能不能告诉View一个数据结构，然后View就能根据这个数据结构的变化而自动随之变化呢？当然是可以的，我们引入MVVM开发模式。

ViewModel，他可以与View层绑定，当ViewModel发生变化时，View立刻就会发生变化。所以其实ViewModel实现了对其自身数据结构变动到视图的转换。

2.快速开始

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

2.1文本插值方式

　　在Vue中，数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：{{属性}}

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!--这是我们的View-->

        <div id="app">

            {{ message }}

        </div>

    </body>

    <script src="js/vue.js"></script>

    <script>

        // 这是我们的Model

        var exampleData = {

            message: 'Hello World!'

        }

        // 创建一个 Vue 实例或 "ViewModel"

        // 它连接 View 与 Model

        new Vue({

            el: '#app',

            data: exampleData

        })

    </script>

</html>

2.2输出原始HTML

    <h2>原始HTML</h2>

    <div id="app2">

        <span v-html="message"></span>

    </div>

    <script>

        var app = new Vue({

            el: '#app2',

            data: {

                message: '<b>你好Vue</b>'

            }

        })

    </script>

2.3绑定元素特性：

　　Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：

<script src="https://unpkg.com/vue"></script>

 <div id="app">

   <span v-bind:title="content">你好</span>

 </div>

 <script>

 var app = new Vue({

  el:'#app',

  data:{

      content:'你好Vue！'

  }

 })

 </script>

2.4 使用JavaScript表达式

　　对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->

{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->

{{ if (ok) { return message } }}
{{ number + 1 }}

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

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

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

3.常用指令

　　指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式(v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

vi-if指令：进行条件判断

 <div id="app1">

        <h2>X are in stock.</h2>

        <ul>

            <li v-for="p in products">

                <input type="number" v-model.number="p.goods_num">

                {{p.goods_name}}

                <span v-if="p.goods_num===0">

                    卖完了

                </span>

                <button @click="p.goods_num+=1" class="btn btn-default">Add</button>

            </li>

        </ul>

        <h4>总共的数量是：{{totalNum}} By 计算属性</h4>

        <h4>总共的数量是：{{totalNumMethod()}} By 方法</h4>

    </div>

v-for指令：绑定数组的数据来渲染一个项目列表

    <div id="app">

        <h2>X are in stock.</h2>

        <ul>

            <li v-for="p in products">

                {{p}}

            </li>

        </ul>

    </div>

    <script>

        var app = new Vue({

            el:'#app',

            data:{

                product:"Jack",

                products:['Boot','Mike','Tom']

            }

        })

    </script>

4.v-on:事件监听

v-on的缩写形式如下：

<!-- 完整语法 -->

<a v-on:click="doSomething">...</a>

<!-- 缩写 -->

<a @click="doSomething">...</a>
 <div id='show'>

    <button v-on:click="alert">

    {{content}}

    </button>

 </div>

 <script>

 var app1 = new Vue({

     el:'#show',

   data:{

       seen:false,

     content:"Hello"

   },

   methods:{

       alert:function()

     {

         this.content = '我被点击了'

     }

   }

 })

 </script>

说明：

　　点击按钮后，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

5.v-model：表单与应用程序之间双向绑定

　　v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

　　注意：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data选项中声明初始值。

　　与输入框绑定：

<input v-model="message" placeholder="edit me">

<p>Message is: {{ message }}</p>

　　

　　与复选框绑定：

　　

补充：

　　我们可以使用修饰符来添加双向绑定的一些细节：

<!-- 在“change”时而非“input”时更新 -->

<input v-model.lazy="msg" >

<!-- 将用户输入值转换为数值类型 -->

<input v-model.number="age" type="number">

<!-- 删除首尾空白符号 -->

<input v-model.trim="msg">

6.组件化应用程序构建

1.创建一个模板

    var myComponent = Vue.extend({

        props:["todo"],

        template: "<a class='weui-cell weui-cell_access' href='javascript:;'>
<div class='weui-cell__bd'><p>{{todo.text}}</p></div><div class='weui-cell__ft'></div></a>"

    });

2.注册模板

　　Vue.component('todo-item',myComponent);

3.使用组件

        var app = new Vue({

            el:"#cell-list",

            data:{items:[{id:1,text:"hello"},{id:2,text:"bob"},{id:3,text:"Tom"}]}

        })

Vue:实践学习笔记(1)——快速使用的更多相关文章

  1. Vue:实践学习笔记(3)——组件使用

    Vue:实践学习笔记(3)——组件使用 全局注册 1.注册组件 Vue.component('my-component',{ //选项 }) 说明:my-component就是注册的组件自定义的标签名 ...

  2. Vue:实践学习笔记(5)——Vue-Cli脚手架的使用

    Vue:实践学习笔记(5)——Vue-Cli脚手架的使用 快速开始 项目配置 可视化配置 vue ui 命令配置 vue init webpack vue-demo(项目名) 运行测试 进入vue-d ...

  3. Vue:实践学习笔记(6)——使用SLOT分发内容

    Vue:实践学习笔记(6)——使用SLOT分发内容 Slot Slot是什么 Slot是父子组件的通讯方式,可以将父组件的内容显示到子组件之中. 使用SLOT前 比如我在定义组件的时候,在里面输入了X ...

  4. Vue 学习笔记之快速入门篇

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与 ...

  5. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  6. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  7. Vue学习笔记-Vue基础入门

    此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...

  8. Vue学习笔记三：v-bind，v-on的使用

    目录 v-bind:绑定属性值,内容相当于js,缩写: v-on:绑定方法,缩写@ 总结 v-bind:绑定属性值,内容相当于js,缩写: 我添加了一个input标签,如下 <input typ ...

  9. vue 学习笔记（二）

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

随机推荐

  1. vue-router 嵌套路由

    const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ { // 当 /u ...

  2. 前端自动化Grunt教程

    最近在学习Bootstrap,了解一部分之后,发现Bootstrap使用了LESS,好嘛,开始学习LESS,LESS了解部分,发现自动编译工具Grunt,了解Grunt过程发现需要使用node.js的 ...

  3. struct和class的不同以及struct的应用场景

    struct在C#中被用来定义结构,它是一种比类小的数据类型.和类一样都是创建对象的模板,可以有自己的数据以及处理和访问数据的方法. struct的用法: struct FurnitureSize { ...

  4. 【ExtAspNet学习笔记】ExtAspNet控件库中常见问题

    1.在Grid控件中添加CheckBoxField控件,选择一行时,如何获取选择的CheckBoxField所对应记录的唯一标识值? ●解决方案: 在前台Grid控件中, 添加“<ext:Che ...

  5. webstore 与 热编译的配置冲突

    这个勾去掉就会自动编译了!

  6. PHP接收和发送XML数据(json也通用)

    一.接收xml数据, 使用php://input,代码如下: <?php $xmldata=file_get_contents("php://input"); $data=s ...

  7. [译]GLUT教程 - 子菜单

    Lighthouse3d.com >> GLUT Tutorial >> Pop-up Menus >> Sub Menus 上一节我们介绍了如何创建普通菜单和如果 ...

  8. android 蓝牙低耗能（LBE）技术介绍

    蓝牙低能耗(BLE)技术是低成本.短距离.可互操作的鲁棒性无线技术.工作在免许可的2.4GHz ISM射频频段.它从一開始就设计为超低功耗(ULP)无线技术. 它利用很多智能手段最大限度地减少功耗. ...

  9. PHP SOCKET编程 .

    1. 预备知识 一直以来很少看到有多少人使用php的socket模块来做一些事情,大概大家都把它定位在脚本语言的范畴内吧,但是其实php的socket模块可以做很多事情,包括做ftplist,http ...

  10. Django开发之html交互

    html中用户输入信息,由Django的view.py处理,大致用到了以下几类格式: 1. 文本框 <input type="text" name="vid&quo ...