node（狗狗管理） vue（修饰符、input输入类型、脚手架）

狗狗管理

date>inde.js

// 导入fs模块

const {log} = require('console');

// 系统自动生成

const fs = require('fs')

// 先读取文本内容

fs.readFile('./dogs.json',(err,data) =>{

// 读取成功

if(!err){

console.log(data);

const arr = JSON.parse(data);

console.log(arr);

arr.push('小金毛');

console.log(arr);

fs.writeFile('./dogs.json',JSON.stringify('arr'),err => {

if(!err){

console.log('写入成功');

}else{

console.log('写入失败');

}

})

}

})

module>function.js

const fs = require('fs')

function addDog(dog) {
    // 读取文件
    fs.readFile('../data/dogs.json', (err, data) => {
        // 读取成功
        if (!err) {
            // console.log(data); //<Buffer 5b 22 e8 90 a8 e6 91 a9 e8 80 b6 22 5d>

            // JSON通常用于与服务器交换数据
            // 所以我们通过JSON.parse方法把JSON数据转换为JS字符串
            // console.log(JSON.parse(data));

            // 定义一个数组去接收我们读取到的数据
            const arr = JSON.parse(data)

            // 往数组中增加元素
            arr.push(dog)

            // console.log(arr);

            // 向JSON文件写入数组元素
            fs.writeFile('../data/dogs.json', JSON.stringify(arr), err => {
                if (!err) {
                    console.log('写入成功')
                } else {
                    console.log('写入失败')
                }
            })
        }
    })
}

addDog('比熊')

// 封装的读取狗狗的方法
function readDog () {

    // 读取
    fs.readFile('../data/dogs.json',(err,data) => {
    // fs.readFile('./data/dogs.json',(err,data) => {

        // 如果每次就打印数组
        if(!err){
            console.log( JSON.parse(data) );
        }else {
            // 打印错误
            console.log(err);
        }
    })
}

module.exports = {
    addDog,
    readDog
}

修饰符

lazy

<div id="app">



<input v-model.lazy="msg">

<span>{ {msg}}</span>

</div>

<script src="../vue.js"></script>

<script>

new Vue({

el:'#app',

data:{

msg:'1111'

}

})

</script>

number

<div id="app">



<input type="number" v-model.number="age">

<span>{ {age}}</span>

</div>

<script src="../vue.js"></script>

<script>

new Vue({

el:'#app',

data:{

age:''

},

watch:{

age(){

console.log(typeof(this.age));

}

}

})

</script>

trim

<div id="app">



<input type="text" v-model.trim="msg">

<span>{ {msg.length]}</span>

</div>

<script src="../vue.js"></script>

<script>

new Vue({

el:'#app',

data:{

msg:''

}

})

</script>

input输入类型

单选按钮

div id="app">

<span>选择一种语言:{ { language}}</span> <br>

<input type="radio" id="python" value="python” v-model="language">

<label for="python">python</label>

<input type="radio" id="javascript” value="javascript” v-model="language">

<label for="javascript">javascript</label>

<input type="radio" id="c++" value="c++" v-model="language">

<label for="c++">c++</label>

</div>

<script src="../vue.js"></script>

<script>

new Vue({

el:'#app',

data:{

language:''

}

})

</script>

多行文本框

<div id="app">

<textarea v-model="comment" cols="50" rows="10" placeholder="请输入您的留言"></textarea>

<p>您的留言是</p>

<p style="white-space:pre-line;">{ {comment}}</p>

</div>

<script src="../vue.js"></script>

<script>

new Vue({

el:'#app',

data:{

comment:''

}

})

</script>

复选框

<div id="app">

<span>请选择语言,已选择:{ { language }}，{ { language.length }}种</span> <br>

<input type="checkbox" id="python" value="python" v-model="language">

<label for="python">python</label>

<input type="checkbox"id="javascript" value="javascript" v-model="language">

<label for="javascript">iavascript</label>

<input type="checkbox" id="c++" value="c++" v-model="language">

<label for="c++">c++</label>

</div>

<script src="../../vue.js"></script>

<script>

new Vue({

el:'#app',

data:{

language:[]

}

})

</script>

文本框

<body>





文本输入:<input type="text"><br>



输入密码:<input type="password"> <br>



选择文件:<input type="file"> <br>



反复选择:<input type="checkbox"> <br>



唯一选择:<input type="radio"> <br>



图片提交:<input type="image”src="图片路径"><br>



提交按钮:<input type="submit"> <br>



选择月份:<input type="month"> <br>



选择时间:<input type="time"> <br>



选择周:<input type="week">

</body>

下拉框

<div id="app">

<span>请选择一种语言：{ {language}}</span> <br>

<select v-model="language">

<option>python</option>

<option>js</option>

<option>c++</option>

</select>

</div>

<script src="../vue.js"></script>

<script>

new Vue({

el:'#app',

data:{

language:''

}

})

</script>

脚手架

1. vue脚手架是什么？
它是一个专门为单页面（SPA）应用快速搭建繁杂的脚手架，它是基于webpack的基础开发出来的一款能够快速的帮助我们构建一个用来开发vue的项目目录、结构（vue和webpack的项目模板）。
vue脚手架通常使用在大型项目中，能够加快我们的开发速度。而小型项目不推荐使用脚手架，因为反而会拖慢我们项目的开发速度

2. 脚手架的基础使用与理解：
安装/升级：
//安装

npm install -g @vue/cli//

//升级

npm update -g @vue/cli

//查看当前脚手架版本

vue -V

//安装指定版本

npm i -g @vue/cli@版本号

脚手架创建项目-启动服务
1.创建项目（注意: 项目名不能带大写字母, 中文和特殊符号）

# vue和create是命令, vuecli-demo是自己的文件夹名
vue create vuecli-demo

2.选择模版（可以上下箭头选择, 回车确定, 弄错了ctrl+c从第1步来）

3.选择包管理器

4.等待下载脚手架项目, 需要的依赖包

5.按照步骤运行两行代码-开启服务器

脚手架目录分析

node（狗狗管理） vue（修饰符、input输入类型、脚手架）

狗狗管理

date>inde.js

module>function.js

修饰符

lazy

number

trim

input输入类型

多行文本框

复选框

文本框

下拉框

脚手架

猜你喜欢