单页面网页引入vue框架
单页面使用Vue.js渲染数据
此方法只能简单的引用框架及使用，
后续会增加在单页面中使用es6语法及模块和方法封装
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>VUE单页面测试</title>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
</head>
<style type="text/css">
.li{
line-height: 50px;
}
</style>
<body>
<div id="app">
<template>
<div class="li" v-for="li in list" :key="li.id" v-on:click="aa(li.title)">{{li.title}}</div>
<h3 onclick="haha('外部事件1')">事件1</h3>
</template>
<h1>{{text}}</h1>
<h3 @click=”pp”>事件2</h3>
</div>
<div id="output"></div>
<!-- <h3 onclick="haha('外部事件2')">事件2</h3> -->
</body>
</html>
<!-- Load Babel -->
<!-- v6 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>
<script>
var vm;
getdata();
var arr=['aa','ss','dd','ff'];
var index = arr.indexOf('dd');
arr.splice(index, 1);
console.log(arr)
function getdata() {
let d={page:0,num:3,type:1};
com_axios('index/index/getbanner',d,function (ret) {
vm = setvue(ret)
})
}
function com_axios(text,data,callbacks) {
axios.get('https://clzd.yczbfx.com/index.php/'+text,{page:0,num:3,type:1})
.then((res)=>{
console.log("远程结果2",res.data)
if(res.data.code==1){
callbacks(res.data.data)
}
})
}
function setvue(list_d) {
// return;
return new Vue({
el: '#app',
data: {
list: list_d,
text:'初始文字',
info:{
name:'nametest',
age:18,
sex:1
},
Name:'ewqqer'
},
mounted: function() {
var self = this;
console.log('vue初始化完成')
window.addEventListener('scroll', this.scrollHandle);
},
methods: {
aa: function(text) {
console.log('事件aa触发:' + text)
this.text=text;
},
scrollHandle(){
console.log('触发滚动')
},
pp(){
axios.get('http://aqb.yczbfx.com/api/user/login?account=15773228273&password=123456', {})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
},
watch:{
Name: {
handler(newName, oldName) {
console.log(newName)
},
// 代表在wacth里声明了immediate==true后，vue初始化时也会执行此方法
//如果设置了false，只有在值改变的时候才会执行方法
immediate: true
},
text:function (n,o) {
console.log('text变化后文字：'+n);
console.log('text变化前文字：'+o);
},
info:{
handler:function(val,oldval){
console.log(val)
},
deep:true//对象内部的属性监听，也叫深度监听
},
'info.name':function(val,oldval){
console.log('123:'+val+"aaa")
},//对单个元素单个值内部进行监听，键路径必须加上引号
}
})
}
function haha(text) {
vm.aa(text)
}
</script>
```
相关文章
发表评论
评论列表
- 这篇文章还没有收到评论，赶紧来抢沙发吧~