前端基础知识与简单模板

最新推荐文章于 2023-02-02 16:31:05 发布

goddemon

最新推荐文章于 2023-02-02 16:31:05 发布

阅读量956

点赞数 2

分类专栏：开发文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/qq_33942040/article/details/114826403

版权

开发专栏收录该内容

4 篇文章 1 订阅

订阅专栏

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

goddemon

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端基础知识与简单模板

基础知识文档vue.js搭建个人博客vue写的一些小网站个人网站的开发之路Vue.js技术揭秘vue基础知识基础项目vue前端开发学习基础的js代码使用方法#①先引用vue.js#②在实例化一个,然后进行引用即可-->用<script></script>进行引用#③引用方法#1.<div>标签引用<div>{{msg2}}</div>#2.h标签引用<!DOCTYPE html><html&g
复制链接

扫一扫