文件类型的不同
文件分别是.html和.vue的格式
代码架构的不同
html中有一个html大节点，里面有script和style节点；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
</script>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
vue中template是一级节点，用于写tag组件，script和style是并列的一级节点
<template>
<view>
有且只能有一个根view。所有内容写在这个view下面。
</view>
</template>
<script>
export default {
}
</script>
<style>
</style>
外部文件引用方式的不同
html中通过script src、link href引入外部的js和css；
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
vue中import引入外部的js模块(注意不是文件)或css
<script>
var util = require('../../../common/util.js'); //require这个js模块
var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法
</script>
util文件
function formatTime(time) {
return time;
}
module.exports = {
formatTime: formatTime
}
其它引入方式
var dateUtils = require('../../../common/util.js').dateUtils; //直接使用js模块的属性
import * as echarts from '/components/echarts/echarts.simple.min.js'; //将js导入并重命名为echarts，然后使用echarts.来继续执行方法
css的文件导入
<style>
@import "./common/uni.css";
.my-text{
color:#7A7E83;
}
</style>
组件全局导入
import pageHead from './components/page-head.vue' //导入
Vue.component('page-head', pageHead) //注册。注册后在每个vue的page页面里可以直接使用<page-head></page-head>组件。
组件单独导入
<template>
<view>
<my-view text="abc" :inverted="true"></my-view><!--3.使用组件-->
</view>
</template>
<script>
import myView from "../../../components/uni-badge.vue";//1.导入组件
export default {
data() {
return {
}
},
components: {
myView //2.注册组件
}
}
</script>
元素操作的不同
html中需要用js操作dom;
<html>
<head>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function () {
document.getElementById("spana").innerText="456"
})
function changetextvalue () {
document.getElementById("spana").innerText="789"
}
</script>
</head>
<body>
<span id="spana">123</span>
<button type="button" onclick="changetextvalue()">修改为789</button>
</body>
</html>
vue采用mvvm模式，大幅减少代码行数，同时差量渲染性能更好
<template>
<view>
<text>{{textvalue}}</text><!-- 这里演示了组件值的绑定 -->
<button :type="buttontype" @click="changetextvalue()">修改为789</button><!-- 这里演示了属性和事件的绑定 -->
</view>
</template>
<script>
export default {
data() {
return {
textvalue:"123",
buttontype:"primary"
};
},
onLoad() {
this.textvalue="456"//123都来不及显示就变成了456
},
methods: {
changetextvalue() {
this.textvalue="789"//页面自动刷新为789
}
}
}
</script>
网友评论