betway必威-betway必威官方网站
做最好的网站

浅谈Jquery和常用框架Vue变化,基本操作

区别

  1. Vue数据与视图的分开
  2. Vue数据驱动视图

图片 1

Jquery 轻易示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
</head>
<body>
<input id="title" />
<button id="add">udto list</button>
<ul id="list">
</ul>
<script type="application/javascript" src="http://www.lebaoshangcheng.com/uploads/allimg/190508/1615255949-1.jpg"></script>
<script type="application/javascript">
    $('#add').click(function () {
        $('#list').append('<li>' $('#title').val() '</li>')
        $('#title').val('');
    })
</script>
</body>
</html>

  

Vue 简单示例:

<div id="example-1">
    <input v-model="title" />
    <button v-on:click="add">udto list</button>
    <ul>
        <li v-for="item in items">
            {{ item.message }}
        </li>
    </ul>
</div>

  

var example1 = new Vue({
        el: '#example-1',
        data: {
            title:'',
            items: [
                { message: 'Foo' },
                { message: 'Bar' }
            ]
        },
        methods:{
            add:function(){
                this.items.push({message: this.title})
                this.title =''
            }
        }
    })

Vue原理深入分析请看下1篇随笔:http://www.cnblogs.com/fuGuy/p/9222249.html

 

基本操作(上)

本章节简单介绍:

    vue的安装

    vue实例创建

    数据绑定渲染

    表单数据双向绑定

    事件管理

Vue.js(读音 /vjuː/, 类似于 view) 是一套营造用户分界面包车型大巴渐进式框架。

源码地址

https://github.com/10086XIAOZHANG/VirtualDOMDemo  

安装

  安装情势有二种:

    壹、vue官方网站直接下载

     http://vuejs.org/js/vue.min.js

    二、使用CDN方法

  1. BootCDN(国内) : https://cdn.bootcss.com/vue/2.2.2/vue.min.js , (国内不安宁)           
  2. unpkg:, 会保持和 npm 发表的新颖的本子同样。(推荐应用)
  3. cdnjs : ,如(<script src="

    贰、使用node.js的npm包管理工具下载

npm install vue

Vue 只关切视图层, 接纳自底向上增量开垦的设计。

Vue实例

 

    new Vue({
      el : ' ' ,   
      data : {  },
      methods : {  }
      }
    });

 

 vue实例中多少个最宗旨的性质el、data、methods,效能如下:

 - el

    ■ 钦命被Vue管理的模版入口,网页中的DOM节点

    ■ 作为模板入口的DOM节点不可能是body、html

    ■ 必须是三个常见的HTML标签节点,一般是某些 div

 - data

    ■ 作用:多少驱动试图中的数据

    ■ 不是何许数据都往里面发轫化的,一般是基于你的视图来伊始化使用:数据驱动视图成效的数额

    ■ data中的成员一般叫做和视图交互的响应式数据成员

    ■ 以前想要操作DOM,必须给DOM起1个id搞3个标记。未来无需了,只须要在data中开头化一个数目成员,然后再模板中绑定使用这么些成员,大家就能够透过修改数据的格局来退换视图呈现

    ■ 大旨正是把DOM操作思想调换成“数据驱动视图”

 - methods

    ■ 一般用来定义事件管理函数

    ■ 固然我们得以把措施写到data中,但是在Vue中更推荐把持有办法都写到methods属性中。因为那样做越发客观,数据和艺术分别,分门别类。

    ■ 注意:methods中不容许有和data中重名的积极分子

Vue 的指标是因而尽只怕轻便的 API 完毕响应的数量绑定和组合的视图组件。

多少绑定渲染

Vue 学习起来非常简单,本学科基于 Vue 贰.一.8 版本测试。

文本绑定:{{ }}

 - mustache语法 ( 八字胡 ) ,中括号括号内部能够是数量变量可能表达式

  示例:

<h1>{{ message }}</h1>

 

图片 2

本性绑定:v-bind

  - 完整写法: v-bind:属性名称=”数据变量或表明式” 

  - 简写情势: :属性名称=”数据变量或表达式” 

示例:

    <!-- 完整写法 -->
    <input type="text" v-bind:value="message">
    <!-- 简写 -->
    <input type="text" :value="message">

上边譬如:数据和性子绑定的二种用法和宽广错误:

    <!-- 下面以data中的message的各种绑定形式举例: -->
    <!-- 普通文本数据绑定 -->
    <!-- 
         正确绑定方式
    -->
    <h1>{{ message }}</h1>

    <!-- 
         错误绑定方式 : 这里表示的是字符串 message
         {{ }}内不需要加引号,如果加了引号,就会把 message当做字符串处理,而不是data中的数据成员
    -->
    <h1>{{ 'message' }}</h1>

    <!-- 这里表示的是数字 123 ,不和任何数据有关联 -->
    <h1>{{ 123 }}</h1>  

    <!-- 属性绑定方式 -->
    <!--
         错误的用法,属性绑定需要用 v-bind 指令进行绑定,而不能使用八字胡语法
    -->
    <h1 foo="{{ message }}">测试文本</h1>

    <!-- 
         正确的属性绑定方式: 完整写法(简写去掉 v-bind 只用冒号即可)
    -->
    <h1 v-bind:foo="message">测试文本</h1>

    <!-- 
      错误的绑定方式 : 同理这里表示的是字符串
    -->
    <h1 v-bind:foo="'message'"></h1>

上边所说的说明式,是指部分粗略的Java Script表明式,如下所示:

    {{ number   1 }}
    {{ ok ? 'YES' : 'NO' }}
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-'   id "></div>>

注意:一般来讲的公文数据绑定和品质绑定都以单向绑定

  • 多少变动,视图跟着变
  • 视图改动,数据不改变

 对有个别独辟蹊径质量,作用方式有所不一致,如 class 和 checked


特种属性class:

  • v-bind:class=”{类名:布尔值}”

    ■ 当布尔值为true的时候,那作用那些类名

    ■ 当布尔值为false的时候,那去除本条类名

基本操作如下:

    <!-- 当item.done 为true的时候,类 complete 就对当前 <li> 起作用 -->
    <li v-bind:class=" { complete : item.done } ">
      <a href="">{{ item.title }}</a>>
    </li>

开卷本教程前,您供给领会的文化:

本文由betway必威发布于网页设计,转载请注明出处:浅谈Jquery和常用框架Vue变化,基本操作

Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。