vue知识总结
基础知识文档
vue.js搭建个人博客
vue写的一些小网站
个人网站的开发之路
基础的 vue的js代码使用方法
#①先引用vue.js
#②在实例化一个,然后进行引用即可-->用<script></script>进行引用
#③引用方法
#1.<div>标签引用<div>{{msg2}}</div>
#2.h标签引用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
</div>
</body>
<script>
// 实例化vue对象
let vm = new Vue({
// 绑定对象
el:'#app',
data:{
msg:'hello vue.js'
}
})
</script>
</html>
列表渲染:应用于控制显示json的操作
用v-for把一个数组对应为一组元素
#使用案例-->使用方法
var example2 = new Vue({
el: '#example-2',#定义的名字
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
#典型-->使用方法类
<script>
var demo = new Vue({
el: '#main',
data: {
searchString: "",
// 数据模型,实际环境你可以根据 Ajax 来获取
articles: [
{
"title": "What You Need To Know About CSS Variables",
"url": "http://www.runoob.com/css/css-tutorial.html",
"image": "http://static.runoob.com/images/icon/css.png"
},
{
"title": "Freebie: 4 Great Looking Pricing Tables",
"url": "http://www.runoob.com/html/html-tutorial.html",
"image": "http://static.runoob.com/images/icon/html.png"
},
{
"title": "20 Interesting JavaScript and CSS Libraries for February 2016",
"url": "http://www.runoob.com/css3/css3-tutorial.html",
"image": "http://static.runoob.com/images/icon/css3.png"
},
{
"title": "Quick Tip: The Easiest Way To Make Responsive Headers",
"url": "http://www.runoob.com/css3/css3-tutorial.html",
"image": "http://static.runoob.com/images/icon/css3.png"
},
{
"title": "Learn SQL In 20 Minutes",
"url": "http://www.runoob.com/sql/sql-tutorial.html",
"image": "http://static.runoob.com/images/icon/sql.png"
},
{
"title": "Creating Your First Desktop App With HTML, JS and Electron",
"url": "http://www.runoob.com/js/js-tutorial.html",
"image": "http://static.runoob.com/images/icon/html.png"
}
]
},
computed: {
// 计算数学,匹配搜索
filteredArticles: function () {
var articles_array = this.articles,
searchString = this.searchString;
if(!searchString){
return articles_array;
}
searchString = searchString.trim().toLowerCase();
articles_array = articles_array.filter(function(item){
if(item.title.toLowerCase().indexOf(searchString) !== -1){
return item;
}
})
// 返回过来后的数组
return articles_array;;
}
}
});
</script>
三,栏目转换到json的思路
js文件
注意事项:css跟一些属性标签可能造成渲染这种内容显示失败
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var txt = '{"employees":[' +
'{"lxwm":"联系我们","gywm":"关于我们","wjk":"文件库","gjwj":"国家文件","sjwj":"省级文件","gxwj":"高校文件"},' +
'{"sy":"首页","xsdt":"学术动态","alk":"案例库"},' +
'{"wxk":"文献库","gnwxk":"国内文献库","gwwxk":"国外文献库","zmjy":"正面经验","fmal":"负面案例"}]}';
obj = JSON.parse(txt);
document.getElementById("sy").innerHTML=obj.employees[1].sy
document.getElementById("xsdt").innerHTML=obj.employees[1].xsdt
document.getElementById("alk").innerHTML=obj.employees[1].alk
document.getElementById("fmal").innerHTML=obj.employees[2].fmal
document.getElementById("zmjy").innerHTML=obj.employees[2].zmjy
document.getElementById("wxk").innerHTML=obj.employees[2].wxk
document.getElementById("gnwxk").innerHTML=obj.employees[2].gnwxk
document.getElementById("gwwxk").innerHTML=obj.employees[2].gwwxk
document.getElementById("lxwm").innerHTML=obj.employees[0].lxwm
document.getElementById("gywm").innerHTML=obj.employees[0].gywm
document.getElementById("wjk").innerHTML=obj.employees[0].wjk
document.getElementById("gjwj").innerHTML=obj.employees[0].gjwj
document.getElementById("sjwj").innerHTML=obj.employees[0].sjwj
document.getElementById("gxwj").innerHTML=obj.employees[0].gxwj
</script>
html文件
<header id="header">
<div class="navbox">
<h2 id="mnavh"><span class="navicon"></span></h2>
<div class="logo"><a href="">高校内部权力运行数据库网</a></div>
<nav>
<ul id="starlist">
<li><a href="index.html"><span id="sy"></span><br></a></li>
<li><a href="xsdt.html"><span id="xsdt"></span><br></a></li>
<li class="menu"><a href="wxk.html" id="wxk"></a>
<ul class="sub">
<li><a href="gnwxk.html" id="gnwxk"></a></li>
<li><a href="gwwxk.html" id="gwwxk"></a></li>
</ul>
<span></span></li>
<li class="menu"><a href="wjk.html" id="wjk"></a>
<ul class="sub">
<li><a href="gjwj.html" id="gjwj"></a></li>
<li><a href="sjwj.html" id="sjwj"></a></li>
<li><a href="gxwj.html" id="gxwj"></a></li>
</ul>
<span></span></li>
<li class="menu"><a href="alk.html" id="alk"></a>
<ul class="sub">
<li><a href="zmjy.html" id="zmjy"></a></li>
<li><a href="fmal.html" id="fmal"></a></li>
</ul>
<span></span></li>
<li><a href="lxwm.html"><span id="lxwm"></span><br></a></li>
<li><a href="gywm.html"><span id="gywm"></span><br></a></li>
</ul>
</nav>
</div>
</header>
四:“前端中嵌入一个百度搜索功能”
html文件
<div id="app">
<main role="main">
<div class="search-bar col-center-block">
<div class="input-group input-group-alternative">
<input type="text" class="form-control" v-model="keyword" @keyup="getSuggestion">
<div class="input-group-btn">
<button class="btn form-control input-group-text" @click="clickText(keyword)">搜索</button>
</div>
</div>
<ul class="list-group border-0">
<li class="list-group-item list-group-item-action border-0" style="border-radius: 0;" v-for="value in suggestions" @click="clickText(value)">
{{ value }}
</li>
</ul>
</div>
</main>
</div>
js文件
<script>
new Vue({
data: {
suggestions: [],
keyword: ''
},
methods: {
getSuggestion: function () {
if (this.keyword === '') {
this.suggestions = [];
return;
}
this.$http.jsonp('https://suggestion.baidu.com/su', {
wd: this.keyword,
cb: 'queryList'
}, {
jsonp: 'cb'
}).then(function (response) {
this.suggestions = response.data.s;
});
},
clickText: function (val) {
this.keyword = val;
window.open("https://www.baidu.com/s?ie=utf-8&wd=" + val);
}
}
}).$mount('#app');
</script>
项目
①高仿网易云音乐项目
https://blog.csdn.net/qq_39839903/article/details/109372193?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161578258416780266249927%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=161578258416780266249927&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v29-21-109372193.pc_search_result_cache&utm_term=vue%E7%AE%80%E5%8D%95%E5%AE%9E%E6%88%98
②
配置vue框架–>即用脚手架写
直接导入vue.js文件和router
①先引用vue.js
②建立router路由对象以及router路由对象组
③用new Vue和let app进行捆绑操作
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>vue-router使用的基本步骤</title>
</head>
<body>
<div id='app'></div>
<!-- 第一步骤:引入vue.js和vue-router.js -->
<script type='text/javascript' src='node_modules/vue/dist/vue.js'></script>
<script type='text/javascript' src='node_modules/vue-router/dist/vue-router.js'></script>
<script type='text/javascript'>
// 第二步骤: Vue.use(VueRouter) 当VueRouter不在全局环境下时再使用(此步骤可忽略)
let Login = {
template:`
<div>我是登陆</div>
`
}
let Regist = {
template:`
<div>我是注册</div>
`
}
//第三步骤:新建router对象
//第四步骤:定义路由匹配规则routes ,routes是一个对象数组,对象中包含的是一个个的路由匹配规则{name, path, component}
// routes路由配置规则下的component为路由对应的具体组件,而且对应的不是字符串而是一个实实在在的已定义组件名
let router = new VueRouter({
routes:[
{
name:'login',
path:'/login',
component:Login
},
{
name:'regist',
path:'/regist',
component:Regist
}
]
})
// App组件下之所以可以使用router-link和router-view是因为script引入了vue-router,因此其它子组件中也是可以使用的
/* let App = {
template:`
<div class='app'>
<router-link :to='{name:"login"}'>登陆</router-link>
<router-link :to='{name:"regist"}'>注册</router-link>
<router-view></router-view>
</div>
`
}*/
// to中不包含参数,直接用字符串形式,则to无需使用:to这种绑定形式
let App = {
template:`
<div class='app'>
<router-link to='/login'>登陆</router-link>
<router-link to='/regist'>注册</router-link>
<router-view></router-view>
</div>
`
}
// 第五步骤:router对象交给Vue对象进行管理
let vm = new Vue({
el:'#app',
router,
components:{
App
},
template:`
<App/>
`
})
</script>
</body>
</html>
js基础函数类总结
①常见的js函数
String.fromCharCode(tab2[17]);将值转为字符串
split()函数
将字符串分割为数组
window.prompt(‘Enter password’);提示用户的弹窗
如
html常用基础页面
1.上传页面
<form name="uploadForm" method="POST"
enctype="multipart/form-data"
action="接口">
Upload File1:<input type="file" name="file1" size="30"/>
<input type="submit" name="submit" value="提交">
<input type="reset" name="reset" value="重置">
</form>
下载链接类
<a href="" download="">报名表下载</a>
2.钓鱼偷拍页面
<!DOCTYPE html>
<html lang="ZH-CN">
<head>
<meta charset="utf-8">
<title>web RTC 测试</title>
<style>
.booth {
width:400px;
background:#ccc;
border: 10px solid #ddd;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="booth">
<video id="video" width="400" height="300"></video>
<button id='tack'> snap shot</button>
<canvas id='canvas' width='400' height='300'></canvas>
<img id='img' src=''>
</div>
<script>
var video = document.getElementById('video'),
canvas = document.getElementById('canvas'),
snap = document.getElementById('tack'),
img = document.getElementById('img'),
vendorUrl = window.URL || window.webkitURL;
//媒体对象
navigator.getMedia = navigator.getUserMedia ||
navagator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia({
video: true, //使用摄像头对象
audio: false //不适用音频
}, function(strem){
console.log(strem);
video.src = vendorUrl.createObjectURL(strem);
video.play();
}, function(error) {
//error.code
console.log(error);
});
snap.addEventListener('click', function(){
//绘制canvas图形
canvas.getContext('2d').drawImage(video, 0, 0, 400, 300);
//把canvas图像转为img图片
img.src = canvas.toDataURL("image/png");
})
</script>
</body>
</html>