web小知识点_web-view v-show-CSDN博客

本文链接：https://blog.csdn.net/cc_lllL/article/details/115426295

一些平时自己学习前端的小知识点。记下来方便自己以后来回顾。推荐html菜鸟教程，对于初学者帮助很大！！！
1.lastindexOf跟substring：

String str = “你好啊,我是猪!”;
int i = str.lastIndexOf(",");
输入的结果是3。
lastIndexOf的结果是该字符的下标。下标从0开始。
String str2 = str.substring(str.lastIndexOf(","));
输出的结果是：,我是猪!
substring是从该字符开始。

2.弹窗alert运用
在一个servlet里面放一个request.setAttribute(“error”, “注册成功”);
在下一个页面里面做一个js:

就可以实现跳转界面时弹窗。

3.画流程图：搜索爱莫流程图

innerHTML 指的是标签间的所有内容。具体看菜鸟教程js改变HTML内容。
getElementById()：根据元素的 id 属性获取一个元素节点对象
5.
JS里面的东西：

js:宿主语言
- 流程结构：顺序结构，if条件结构，循环
- for-in:；类似java中的for each，设定一个元素，迭代循环
- split();字符串砖数组，根据对应的字符分割字符串为数组
- jion():可以用符不同的分隔符来构建这个字串
- 数组：长度可变 []等同于new Array()
- slice(小标一，下标二) 返回从下标1开始，到下标二结束的字符串，不包括下标二
- push()：把元素放到一个新的数组中
pop()：删除最后一个元素
- unshift(元素)：在数组开头添加元素
- shift()：删除数组第一个元素
  *slice(下标1，下标2)：
  1.返回从下标1开始，到下标 2结束的字符串，不包含下标2的字符
  2.应用于数组时，返回对应的元素组成的数组
- reverse()；数组元素颠倒排列，会改原数组
  indexOf(字符);返回字符在对应的字符串中所在的位置（下标)
6.vue：

v-for
遍历渲染
举例循环类：

v-for="(item,index) in 数组或对象"，用于循环展示元素

1.哪个元素需要循环，就在哪个标签标签上使用v-for

2.item是元素本身，index是元素的下标

    <div v-for="item in list"></div>

v-if v-else v-else-if
条件渲染
举例：

        <h1 v-if="exp">Vue is awesome!</h1>
       <h1 v-else>Oh no</h1>

注意：是否能看到文本内容，取决于exp值的真假,
当exp返回true时h1的内容会被渲染，否则渲染v-else指令中的内容
v-if可以单独使用

v-show:
条件性渲染某块内容，但是v-show仅仅是切换元素的display属性，
元素始终都会被渲染，v-show不支持template元素

 **注意：**：
      v-if 与 v-show
        v-if会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；
        v-if是惰性的，如果在初始渲染时条件为假，他就什么也不做，直到条件第一次变为真的时候，才会渲染条件块。
        v-show不管初始条件是真是假，元素总会被渲染，并且只是简单的基于css进行切换；
        v-if的切换开销高，v-show的初始渲染开销高

        注意： 频繁的切换，使用v-show比较好，条件很少改变时，使用v-if比较好。

v-bind
v-bind指令可以用来响应式更新html属性，属性绑定
v-bind:key=‘item.id’
v-bind:title=‘title’
注意： v-bind可以简写
:key=‘item.id’
:title=‘title’

v-on
事件绑定，用于监听dom事件
举例：

百度
注意：v-on可以简写
<a @click=“handler”>百度

v-model
双向数据绑定，一般应用在表单元素上
举例：
v-model=“form.title”

v-html 跟v-test的区别

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>text and html </title>
	<script src="vue.js"></script>
</head>
<body>
	<div id = "com">
	
		{{c}} <br/>
		<h1 v-text="c"></h1>
		<h2 v-html="c"></h2>
		<hr/>
		{{html}} <br/>
		<h1 v-text="html"></h1>
		<h2 v-html="html"></h2>
	</div>
	<script>
		var a = new Vue({
			el:'#com',
			data:{
				c: "test v-text and v-html",
				html: '<h1 style="color:red">Hello Vue!</h1>'
			}
		});
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-URNbDLQN-1617504453054)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\1617156473744.png)]

v-if
指令用于在表达式的值改变时，将某些行为应用到 DOM 上
举例：

现在你看到我了

6.js中各个弹窗的用法：
alert() 弹出个提示框（确定）
confirm() 弹出个确认框（确定，取消）
prompt() 弹出个输入框让你输入东西

jQuery：js的封装，操作DOM元素，事件，特效。。

语法：$(CSS选择器).方法(相关操作);

更改样式：

1.css({属性1:值1,属性2:值2})会写在行内，不推荐

2.addClass(class名) removeClass(class名) toggleClass(class名)，在2个class的样式切换

操作DOM元素内容：方法的参数为空，是获取，不为空，是在设置

html()：常用，可以解析HTML代码

text()：不常用，不能解析HTML代码

val()：获取或设置元素的vaule值

jQuery中.html() 方法

① $(“p”).html(“AAA”);

所有p标签的内容变为：AAA

② $(“p”).html(String);

所有p标签的内容变为：String中的内容

③ $(“p”).html(function(n){
return n;

});

第一个p标签的内容变为：0

第二个p标签的内容变为：1 等等依次类推。

所有p标签的内容变为：n（0,1,2…），即p标签先后的顺序index（0开始）

2.toggle()：显示与隐藏

jQuery事件：交互的不同时机触发的操作，on是为HTMl标签服务和

鼠标事件：

click：点击，完成了一次鼠标点击

mouseover：移入，

mouseout：移出

mouseenter：进入

mouseleave：离开

mousemove：在元素中移动

*切换至子元素会触发mouseover和mouseout

键盘事件：常用于表单元素

keydown：

keypress：

keyup：键松开时触发，完整的1次输入

表单事件：

focus：获得焦点

blur：失去焦点

change：值改变，常用于单选按钮，复选框，下拉列表框

submit reset：用于表单元素本身，不太常用

其他事件：resize改变窗口大小

移除事件：unbind(事件名)：会按事件名移除对应的事件，不加参数会移除所有，

特效：切换元素的显示和隐藏，配合时间毫秒

show：显示

hide：隐藏

slideDown：展开

slideUp：收起

fadeIn：淡入

fadeOut：淡出

4.渐变色： background:linear-gradient （180deg,颜色，颜色）;

5.前端ch13中有导航栏，比较清楚，忘记了可以看看：cursor:改变鼠标样式

6.Vue绑定样式class：具体看前端ch16

\1. :class="{样式1: 表达式1, 样式2:表达式2}"

根据表达式的布尔值，决定样式是否生效

\2. :class="[‘样式1’,{样式2:表达式2}]"

样式1是默认生效的，样式2要根据表达式2的布尔值来决定

关于template的使用：ch18

main.js:

import App from ‘@/App’
new Vue({
el: ‘#app’,
components:{App},
template: ‘’
})

App.vue

index.html

vuecli_01

在main.js中，vue实例的components 是声明有哪些组件，我们通过import App from '@/App’导入，template 是使用哪个组件，el: ‘#app’ 是index.html 的

,它将被替换为mian.js中导入的组件App.vue，组件一般使用的方法就是,

需要注意的是，在components:{App}中采用了缩写，本来应该是components:{App：App},组件名和模板名一样，就缩写了

路由：vue-router，根据不同的路径展示不同的组件内容，原理是锚链接，ch18

router：VueRouer的实例，负责跳转

route：单个路由组件页面，负责展示

1.定义组件

2.初始化VueRouter({配置})

3.把router注入到vue实例中

4.在页面上添加标签

路由跳转：

1.类似a标签的方式：

2.使用this.$router.push(路径); 当前页重复跳转，默认会报错

*在任何组件中都可以使用this.$router

重置：ch16中

this. $d a t a 是表示当前的改变后的 t h i s 中的数据，而 t h i s .$ options.data()是表示没有赋值前的this中的数据,表示初始话的data.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e5TPPeh2-1617504453057)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\1617266995897.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kbh6dn3O-1617504453058)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\1617267005591.png)]

重置单个：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BlyGb3vi-1617504453061)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\1617267526635.png)]

路由跟路由传值的东西：ch19，ch20

<div id="app">
        <router-view></router-view>
    </div>

首先来一个可以显示路由中的组件内容显示的位置的标签，后面就是自己要定义的各个组件了。

每个标签下面就要有一个组件标签给他封装起来并且给他一些参数值，方法等东西。如：

    <div>

首页

新闻列表

<script>

var home = Vue.component(‘home’, {

template: ‘#home’

});

其中标签是用来重定向到其他位置的。

而下面的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OUfBHomV-1617504453063)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\1617504310020.png)]*

最后再定一个vue的东西将整个body的id跟路由放入

var vue = new Vue({

el: ‘#app’,

router // 路由

news">新闻列表

<script>