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

2019-05-08 16:15来源：未知

区别

Vue数据与视图的分开
Vue数据驱动视图

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方法

BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js ，（国内不安宁）
unpkg：, 会保持和 npm 发表的新颖的本子同样。（推荐应用）
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>

本性绑定：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变化，基本操作

TAG标签： betway必威必威官方网站