发布于 

3.前端知识

一、VUE入门

1. Vue入门案例

  1. 引入vue文件

  2. 编写vue代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <script src="vue.js"></script>
        <div id="app">
            <!--插值表达式-->
            {{message}}
        </div>

        <script>
            new Vue({
                el:'#app',
                data:{
                    message:'hello vue'
                }
            })
        </script>

创建代码片段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
{
    "vue htm":{
        "scope": "html",
        "prefix": "vuehtml",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"en\">",
            "",
            "<head>",
            "   <meta charset=\"UTF-8\">",
            "   <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"   <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
            "   <title>Document</title>",
            "</head>",
            "",
            "<body>",
			"    <div id=\"app\">",
			"", 
			"    </div>",
            "   <script src=\"vue.min.js\"></script>",
            "   <script>",
            "       new Vue({",
            "           el: '#app',",
            "           data: {",
            "               $1",
            "           }",
            "       })",
            "   </script>",         
            "</body>",
             "",
            "</html>",
        ],
        "description": "my vue template in html"
    }
}

2. 单向和双向绑定指令

单向绑定基础语法：v-bind

指令用在标签属性上面，通过指令获取data中定义变量的值

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
   <div v-bind:style="msg">单向绑定</div>
</div>
<script src="vue.js"></script>
<script>
      new Vue({
          el: '#app',
          data: {
              msg:'color:green;'
          }
      })
</script>

双向绑定基础语法：v-model

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
        {{keyword}}
        <br>
        <input type="text" :value="keyword">
        <br>
        <input type="text" v-model="keyword">
    </div>
   <script src="vue.js"></script>
   <script>
       new Vue({
           el: '#app',
           data: {
               keyword:'张三'
           }
       })
   </script>

在双向绑定中值发生变化，会引起所有位置的keyword变化

3. 绑定事件

基础语法：v-on：事件名称="调用方法"

简写：@事件名称

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
    <div id="app">
        <button v-on:click="show()">事件绑定</button>

        <button @click="show()">事件绑定简写</button>
    </div>
   <script src="vue.js"></script>
   <script>
       new Vue({
           el: '#app',
           data: {
               
           },
           methods: {
               show(){
                   console.log("show....")
               }
           }
       })
   </script>

4. 条件指令

基础语法：v-if v-else

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
        <input type="checkbox" v-model="ok" >
        <br>
        <div v-if="ok">选中了</div>
        <div v-else>没有选中</div>
    </div>
   <script src="vue.js"></script>
   <script>
       new Vue({
           el: '#app',
           data: {
               ok: false
           }
       })
   </script>

5. 循环指令

基础语法：v-for

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">
        <div v-for="(user,index) in userList">
            {{index}} -- {{user.name}} -- {{user.age}}
        </div>
    </div>
   <script src="vue.js"></script>
   <script>
       new Vue({
           el: '#app',
           data: {
               userList:[
                   {"name":"lucy","age":20},
                   {"name":"mary","age":30}
               ]
           }
       })
   </script>

6. 生命周期

created：在页面渲染之前执行

mounted：在页面渲染之后执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app">
        {{msg}}
    </div>
   <script src="vue.js"></script>
   <script>
       new Vue({
           el: '#app',
           data: {
               msg: "hello"
           },
           created(){
               debugger
                console.log('在页面渲染之前执行')
           },
           mounted(){
               debugger
                console.log('在页面渲染之后执行')
           }
       })
   </script>

二、Axois

  1. 在html页面中引入axios的js文件，也包含vue的js文件
  2. 编写具体代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 <div id="app">
     <table>
         <tr v-for="user in userList">
             <td>{{user.name}}</td>
             <td>{{user.age}}</td>
         </tr>
     </table>
 </div>
<script src="vue.js"></script>
<script src="axios.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            userList:[]
        },
        created(){
            //调用方法，得到返回的json数据
             this.getList()
        },
        methods:{
            getList(){
                 //使用axios方式请求ajax
                 axios.get("user.json")
                 .then(response => { //请求成功
                     //console.log(response)
                     this.userList = response.data.data.items
                     console.log(this.userList)
                 }) 
                 .catch(error => {   //请求失败
                     console.log(error)
                 })  
            }
        }
    })
</script>

三、Node.js

是一个基于Chrome V8引擎的JavaScript运行环境：即Node.js内置了Chrome的V8引擎，可以在Node.js环境中直接运行JavaScript程序。

查看是否安装成功，在cmd中输入node -v

1
2
3
4
5
6
7
8
9
10
11
12
13
//引入http模块
const http = require('http');
//创建服务器
http.createServer(function(request, response){
    //发送http头部
    //http状态值：200 ：OK
    //内容类型：text/plain
    response.writeHead(200,{'Content-Type':'text/html'})
    //发送响应数据"hello world"
    response.end('<h1>Hello Node.js Server</h1>');
}).listen(8888);
//终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

四、NPM包管理器

常用命令：

npm init：初始化，生成package.json文件

npm init -y：初始化都使用默认的值

npm config set registry https://registry.npm.taobao.org：修改淘宝镜像

npm config list：查看npm配置信息

npm install 依赖名称，或者指定下载版本npm install 依赖名称@x.x.x

根据配置文件下载依赖：直接使用npm install

五、webpack

可以将多种静态资源文件转换成一个静态资源文件，减少了页面请求

  1. 安装webpack，npm install -g webpack webpack-cli

  2. 创建js文件

    1
    2
    3
    4
    //01.js
    exports.info=function(str){
        document.write(str)
    }
    1
    2
    3
    4
    //02.js
    exports.add=function(a,b){
        return a+b;
    }
    1
    2
    3
    4
    5
    //main.js
    const a = require('./01.js')
    const b = require('./02.js')

    a.info('hello a'+b.add(1,2))

  3. 创建配置文件webpack.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    const path = require("path")    //node.js内置模块
    module.exports={
        entry: './main.js', //配置文件入口
        output:{
            path: path.resolve(__dirname,'./dist'),    //输出路径
            filename: 'bundle.js'   //输出文件
        }
    }

  4. 使用命令打包webpack --mode=development

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

本站由 Cccccpg 使用 Stellar 主题创建。
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。