前端基础知识与简单模板

vue知识总结

基础知识文档
vue.js搭建个人博客
vue写的一些小网站
个人网站的开发之路

Vue.js技术揭秘

vue基础知识
基础项目

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.codeconsole.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>

前端基础知识与简单模板相关推荐

python前端基础知识总结及部分练习题
python前端基础知识总结知识总结认识Python 发展历史版本选择 python2.7是python2的最后一个版本,到2020年将不再维护 python3.6是python3最新的版本,是 ...
day04-硅谷课堂-前端基础知识（二）
硅谷课堂第四天-前端基础知识文章目录硅谷课堂第四天-前端基础知识一.NPM 1.NPM简介 1.1.什么是NPM 1.2.NPM工具的安装位置 2.使用npm管理项目 2.1.创建文件夹npm ...
（硅谷课堂项目）Java开发笔记4：前端基础知识（二）
文章目录 (硅谷课堂项目)Java开发笔记4:前端基础知识(二) 一.NPM 1.NPM简介 1.1.什么是NPM 1.2.NPM工具的安装位置 2.使用npm管理项目 2.1.创建文件夹npm 2. ...
前端基础知识第四章---CSS
前言 ❤️ 生活中总有一些惊喜值得期待,只要我们一直保持着热爱 ❤️ 前端基础知识第四章---CSS 一.CSS 第四章 (1)浮动(float) 1.1 传统网页布局的三种方式 1.2 标准流(普通 ...
（Java高级教程）第四章必备前端基础知识-第二节1：CSS概述和选择器
文章目录一:CSS概述 (1)概述 (2)语法规范 (3)CSS引入方式二:选择器 (1)基础选择器 ①:标签选择器 ②:类选择器 ③:id选择器 ④:通配符选择器总结 (2)复合选择器 ①:后 ...
【前端基础知识笔记】【项目导向型】（持续更新中）
我在做项目的过程中,学习了一些前端基础知识.为了方便以后的查询,将这些知识集中在这篇博客中,方便以后的查询. 注意!这些知识是不成体系的,因为我只是按照遇到的先后顺序记载于此.这是为了方便结合项目开发 ...
前端基础知识第一章---HTML
前言 ❤️ 天空黑暗到一定程度,星辰就会熠熠生辉 ❤️ 前端基础知识第一章---HTML 一.HTML 简介 (1)网页 1.1 什么是网页 1.2 什么是 HTML (2)常用浏览器 2.1 常用的 ...
前端基础知识整理汇总（中）
前端基础知识整理汇总(中) Call, bind, apply实现 // call Function.prototype.myCall = function (context) {context = ...
前端基础知识整理汇总（上）
前端基础知识整理汇总(上) HTML页面的生命周期 HTML页面的生命周期有以下三个重要事件: 1.DOMContentLoaded -- 浏览器已经完全加载了 HTML,DOM 树已经构建完毕,但是 ...

前端基础知识与简单模板

vue知识总结

js基础函数类总结

html常用基础页面

前端基础知识与简单模板相关推荐

最新文章

热门文章