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方法
贰、使用node.js的npm包管理工具下载
npm install 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:属性名称=”数据变量或表明式”
- 简写情势: :属性名称=”数据变量或表达式”
示例:
<!-- 完整写法 -->
<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
■ 当布尔值为true的时候,那作用那些类名
■ 当布尔值为false的时候,那去除本条类名
基本操作如下:
<!-- 当item.done 为true的时候,类 complete 就对当前 <li> 起作用 -->
<li v-bind:class=" { complete : item.done } ">
<a href="">{{ item.title }}</a>>
</li>
开卷本教程前,您供给领会的文化:
本文由betway必威发布于网页设计,转载请注明出处:浅谈Jquery和常用框架Vue变化,基本操作