当前位置: 首页 > news >正文

day59反刍笔记

1.本地环境安装vue后,没有vue.js文件,只有vue.cjs.js文件,

 引用后也无法正常使用,看npm install vue后的文件夹中没有vue.js文件_找不到vue.js_一枝风的博客-CSDN博客

老哥的博客后得到启发,将原本的命令由:npm install vue --save 改为:npm install vue@2 

问题解决。

2.前端数据不正常显示的问题:

定义了变量,但是没有正常显示,进行排查:

发现id错误,变量名没有对应上,修改后成功解决。

 3.关于单向渲染(声明式渲染)和多向渲染

所谓单项渲染就是后端向前端单方面传递数据,

双向渲染是 用户填入什么数据,我后端拿到后再渲染什么数据,这就是双向渲染。

示例:

 4.v-on:后面js表达式or事件

5.插值闪烁是什么?

使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时,页面会显示出原始的{{}},加载完毕后才显示正确数据,我们称为插值闪烁。 尤其在网速比较慢的时候比较明显。

解决方案:使用v-textv-html指令来替代{{}} 

  • v-text:将数据输出到元素内部,如果输出的数据有HTML代码,会作为普通文本输出,推荐使用v-text;
     
  • v-html:将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染。

6.v-if和v-show,更多使用v-if,因为show是一直渲染,如果判断为false时只是将渲染隐藏,而if是判断为false时直接不渲染,并且if支持更多自定义:如if-else等,所以更多使用v-if。

7.v-bind更多用于样式的判断。

8.计算属性和方法:计算属性如果值不发生变化就不会重新计算,而是直接返回之前的值,所以他的效率更高。

9.定义全局组件:

通过Vue的component方法定义全局组件 ,写法:

<div id="app"><!--使用定义好的全局组件--><counter></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">// 定义全局组件,两个参数:1,组件名称,这里的counter就是组件名称!!2,组件参数Vue.component("counter",{template:'<button v-on:click="count++">你点了我 {{ count }} 次,我记住了.</button>',
//template是模板的意思  .component是创建vue实例的一个方法data(){return {count:0}}})var app = new Vue({el:"#app"
//这里的el是个选择器 选中了id为app的标签})
</script>

局部组件:

在外部定义一个组件,结构与创建组件时传递的第二个参数一致

const counter = {template:'<button v-on:click="count++">你点了我 {{ count }} 次,我记住了.</button>',data(){return {count:0}}
};

然后在Vue中使用它:

var app = new Vue({el:"#app",components:{counter:counter // 将定义的对象注册为组件}
})

全局组件是指,组件直接跟vue产生关联,比如:Vue.component("counter"……

局部组件,先通过const定义一个对象,

const counter = {template:'<button v-on:click="count++">你点了我 {{ count }} 次,我记住了.</button>',data(){return {count:0}}
};

然后在Vue中使用它:

var app = new Vue({el:"#app",components:{counter:counter // 将定义的对象注册为组件}
})

这里的components是组件列表,在夫组件中,通过components列表来将定义的对象注册为组件,这里的注册是k:v结构,k是组件名,v是组件实例。

10.对齐问题

&nbsp;空格的意思

&ensp; 半个汉字的空间

&emsp; 一个汉字的空间

11.vue-router安装报错

百度搜索,并按照老哥给的方法成功解决: vue安装vue-router出错-CSDN博客

12.route-link标签:<router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址,默认渲染为带有正确连接的<a>标签,可以通过配置tag属性生成别的标签。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的css类名

(类似于A标签)

13.<router-view>标签:跟上面的标签配合使用,在<router-view>标签放置的地方展示刚刚选择的标签。

总结:

 

http://www.lryc.cn/news/32622.html

相关文章:

  • 【阅读笔记】你不知道的Javascript--强制类型转换4
  • 华为OD机试真题Python实现【有效子字符串】真题+解题思路+代码(20222023)
  • 上门按摩预约APP源码-东郊到家源码(开发,PHP,平台搭建)
  • STL讲解——模拟实现vector
  • 各种经典排序算法介绍及实现源码
  • 历史大讲堂:这是真·图形化 苹果系统历史回顾(上)
  • 今天女神节,用python画个贺卡送给母亲吧
  • 【编程基础之Python】11、Python中的表达式
  • 华为OD机试真题Python实现【乱序整数序列两数之和绝对值最小】真题+解题思路+代码(20222023)
  • 字符串转换整数 (atoi)(python)
  • 洛谷 P1115 最大子段和
  • 【Linux】-- 权限和Shell运行原理
  • C++各类设计模式及实现详解
  • 【Linux】进程理解与学习(Ⅰ)
  • 认识代码之前,请先认识你自己 |《编程人生》
  • react学习笔记-5:react路由
  • [Python图像处理] 使用高通滤波器实现同态滤波
  • PyTorch深度学习:60分钟入门
  • C语言指针常见问题汇总
  • Coremail邮件系统全新上线存档邮箱功能
  • Python绘图
  • 【独家】华为OD机试 - 第K个最小码值的字母(C 语言解题)
  • 整数反转(python)
  • 【数据结构】二叉树与堆
  • Git图解-常用命令操作-可视化
  • C语言-基础了解-20-typedef
  • Ubuntu系统升级16.04升级18.04
  • CM6.3.2启用Kerberos(附问题解决)
  • QML 动画(组合动画)
  • 【PHP代码注入】PHP代码注入漏洞