对比：
原声Javascript
jQuery
Vue.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对比</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/script.js"></script>
<script>
//js方法
/*
var app = document.querySelector('#app');
app.innerHTML = 'hello Javascript';
*/
//jQ方法
/*$(document).ready(function(){
$("#app").text('Hello Jquary');
$('#app').css({'color':'red','font-size':'16px'});
});
*/
//Vue.js
/*var app = new Vue({
el:'#app',
data:{
message:'Hello Vue'
}
})*/
</script>
</body>
</html>
除了文本插值，我们还可以像这样来绑定元素特性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<div id="app">
<!--{{ text1 }}，{{ text2 }}.-->
<!--绑定元素特性-->
<a v-bind:href="url" v-bind:title="title">{{title1}}</a>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="js/script.js"></script>
<script>
/* var app2 = new Vue({
el:'#app',
data:{
text1:'hello Vue',
text2:'今天学习了Vue.js'
}
})*/
var app3 = new Vue({
el:'#app',
data:{
url:'https://cn.vuejs.org/v2/guide/index.html',
title:'进入Vue.js教程',
title1:'欢迎进入Vue.js'
}
})
</script>
</body>
</html>
国内CDN服务（CDN中包含所有的框架，可直接搜索复制链接）
https：//www.bootcdn.cn/
CDN特点：访问速度快
菜鸟教程jQ
http://www.runoob.com/jquery/jquery-dom-add.html
//引入jQ库的网址
https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js
vue.js教程
https://cn.vuejs.org/v2/guide/
//引入vue.js 库的网址
https://cdn.bootcss.com/vue/2.5.16/vue.js
https://cdn.bootcss.com/vue/2.5.16/vue.min.js
2018.9.10
网友评论