前端学习杂记

还是觉得得系统学习一下：

1.JavaScript：here

2.vue——v-for+复选文本框：here

code：

<div id="bpp">>
        <span v-for="one in options">
            <input type="checkbox" v-model="checkedNames" :value="one.value">
            <label :for="one.text">{{ one.text }}</label>
        </span><br>
        <span>选择的值为: {{ checkedNames }}</span>
        <!--        //:checked="index == 0"为索引为0的，即为第一个复选框添加属性。-->
    </div>

const bpp = {
        data() {
            return {
                options: [
                    {text: '星期一', value: 1},
                    {text: '星期二', value: 2},
                    {text: '星期三', value: 3},
                    {text: '星期四', value: 4},
                    {text: '星期五', value: 5},
                    {text: '星期六', value: 6},
                    {text: '星期日', value: 7}
                ],
                checked: false,
                checkedNames: []
            }
        }
    }
Vue.createApp(bpp).mount('#bpp')

 

3.label for 绑定表单：here

 

4.启动前端项目服务器，参考：here

启动项目指令dev/serve/build区别：

 

打开 package.json 文件，观察这段代码：

　　“scripts”: {
　　“serve”: “vue-cli-service serve”,
　　“build”: “vue-cli-service build”,
　　“lint”: “vue-cli-service lint”
　　}

　　可以把这个 npm run serve 当做是 npm run package.json 里面的scripts的value。
　　比如，npm run serve 实际运行的是 vue-cli-service serve；而如果你想使用npm run dev 的话，只需把 “serve” 修改为 “dev” 就行。如下：

　　“scripts”: {
　　“dev”: “vue-cli-service serve”,
　　“build”: “vue-cli-service build”,
　　“lint”: “vue-cli-service lint”
　　}

　　这就是 npm run serve 和 npm run dev 的区别，原理特别简单，但是需要多加注意。
　　npm run xxx，并不是想运行就运行的，只有在 package.json scripts 配置了，才能 run 的，所以不是所有的项目都能 npm run dev/build。

　　要了解这些命令做了什么，就要去scripts中看具体执行的是什么代码。

 

指令具体执行详细：here

分别运行：npm install(一次)，npm run serve (npm run dev)即可。

停止：ctrl+c

 

5.如果使用的v-if、v-show而绑定的数据是动态数据，当数据变化的时候前端并没有响应新数据，这里需要设置一下响应式数据更新，参考:here

 

6.响应式处理img标签写法，需要在标签内v-bind(缩写":")绑定变量：

<img :src="src" alt="后端传来的图片"> 

 

7.前端项目(html)报错：“Not allowed to load local resource: file:///”

是因为浏览器为了安全考虑禁止直接访问当前项目路径外的文件，参考：here。

【可以后端写一个接口，并用vue的v-bind绑定文件数据来进行访问】

eg：访问图片文件(后端转换成了二进制输出流)，参考：here

 

8.SetTimeout 和 SetInterval 和 requestAnimationFrame区别：

 

　　使用 setInterval() 的示例有些不同。我们选择的间隔包括执行我们想要运行的代码所花费的时间。假设代码需要40毫秒才能运行 - 然后间隔最终只有60毫秒。

　　当递归使用 setTimeout() 时，每次迭代都可以在运行下一次迭代之前计算不同的延迟。 换句话说，第二个参数的值可以指定在再次运行代码之前等待的不同时间（以毫秒为单位）。

因此，当你的代码有可能比你分配的时间间隔，花费更长时间运行时，最好使用递归的 setTimeout() - 这将使执行之间的时间间隔保持不变，无论代码执行多长时间，你不会得到错误。

　　requestAnimationFrame按秒帧执行，不能改变时间间隔。

 

三个都是异步处理，如果想要循环体部分完全按照时间间隔运行，那么就要把循环体放入三者的执行{}内部，如果放在外面会同步执行导致执行顺序混乱而出错。

参考：here

 

9.checkbox复选框点击文字部分也能有勾选效果，参考：here

　　使用labal的for属性写上指定的checkbox的id标签，文本放入label中，即可。

【Over】

搜索

复制