枕头想进步-CSDN博客

原创 Vue. js 六、组件化开发（二）

组件语法糖和模板分离Vue为了简化这个过程，提供了注册的语法糖。主要是省去了调用Vue.extend()的步骤直接注册组件第一个参素是标签名字，第二个参数是一个对象模板绑定的id模板分离只需使用template去绑定注册时的模板id即可<template id="mycpn"> <h2>使用template标签，绑定id实现模板分离</h2></template><div id='app'> <my-c

2021-03-01 21:52:59 148

原创 Vue. js 六、组件化开发（一）

组件化思想它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。有了组件化的思想，我们在之后的开发中就要充分的利用它。尽可能的将页面拆分成一个个小的、可复用的组件。这样让我们的代码更加方便组织和管理，并且扩展性也更强组件的使用分成三个步骤：1.创建组件构造器2.注册组件3.使用组件<div id='app'>  <my-cpn></my-cpn> <my

2021-02-27 16:41:07 207

原创 Vue.js 五、双向绑定

v-mode双向绑定Vue中使用v-model指令来实现表单元素和数据的双向绑定。radio绑定使用v-model就不用name也可以互斥<div id='app'> <input type="radio" value="男" v-model='sex'> 男 <input type="radio" value="女" v-model='sex'>女 <h2>您选择的是{{sex}}</h2></div&

2021-02-27 10:40:28 140

原创 Vue.js 四、循环遍历

v-for遍历数组当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。 v-for的语法类似于JavaScript中的for循环。格式如下：（item，index ）in items的形式。<ul> <li v-for="(item,index) in city">{{index}}{{item}}</li></ul>如果对性能有要求的话可以用单向绑定key属性优化性能<ul> <li v-for

2021-02-26 20:49:10 124 2

原创 Vue.js 三、事件监听

v-on 基础这里，我们用一个监听按钮的点击事件，来简单看看v-on的使用下面的代码中，我们使用了v-on:click="counter++”另外，我们可以将事件指向一个在methods中定义的函数<div id='app'> <h2 >点击次数：{{counter}}</h2> <button v-on:click='counter++'>增加次数</button> <button v-on:click=

2021-02-26 16:45:57 328

原创 Vue.js 二、绑定属性

v-bind 单向绑定href标签属性开发中使用一般都使用语法糖，看起来更简洁，v-bind语法糖是“：”以下代码中a标签href属性单向绑定给link，在实例中给link一个网址即可完成绑定<div id="app"> <a :href="link">百度一下</a> //语法糖 <a v-bind:href="link">百度</a> </div>var app =new V

2021-02-24 11:05:44 96

原创 Vue.js 一、插值操作

v-once 不会随着数据改变而改变v-html 输出解析html代码v-pre 不解析内容v-cloak 解析完成就会自动删除

2020-06-18 10:56:38 132

原创 jQuery两种删除已有的的HTML元素

remove() - 删除被选元素（及其子元素） empty() - 从被选元素中删除子元素 <script>$(document).ready(function(){ $("#btn1").click(function(){ $("#div1").remove(); //删除 div 元素 }); $("#btn2").click(function(){ $("#div1").empty(); //清..

2020-06-16 21:21:30 162

原创 jQuery添加新元素与内容

文本前或后添加新元素（以下通用HTML）<body><p id="p">枕头想进步。</p><button id="btn1">追加文本</button><button id="btn2">追加列表项</button></body>append() - 在被选元素的结尾插入内容prepend() - 在被选元素的开头插入内容<script>$(document)...

2020-06-16 20:56:54 146

原创 jQuery获取HTML元素文本，元素内容，元素value值

通过jQuery获取HTML元素文本，元素内容，元素value值<body><p id="test">这是段落中的<b>粗体</b>文本。</p><button id="btn1" value="枕头想进步">显示文本</button><button id="btn2" href="http://www.w3school.com.cn">显示 HTML</button></body

2020-06-16 20:23:27 661 1

原创 jQuery效果之隐藏和显示，淡入淡出，滑动，以及动画

jQuery效果之隐藏和显示效果隐藏hide(); 显示show();$(document).ready(function(){ //当在文档加载后激活函数 $("#hide").click(function(){ //当点击id为hide元素时 $("p").hide(); //p标签消失 }); $("#show").click(function(){ //当点击id为show元素时 $("p").show(); ...

2020-06-13 12:30:30 319

原创 jQuery常用的事件函数

是当输入域获得焦点 (focus) 时 $("input").blur(function(){ });当输入域失去焦点 (blur) 时$("input").blur(function(){});当点击按钮（click）时$("button").click(function(){});当双击按钮（dblclick）时$("button").dbclick(function(){});当输入域发生变化（change）时$(".fie..

2020-06-11 16:34:58 149

原创 jQuery元素选择器对元素组或单元素进行操作

jQuery 元素选择器$(this)获取当前的 HTML 元素$("#test")id="test" 的元素。$("p")获取所有 <p> 元素。$(".test")获取所有 class="test" 的元素。jQuery 获取元素属性值选择器$("[href]") 选取所有带有 href 属性的元素。$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素

2020-06-11 14:47:04 183

原创 js-网页返回顶部功能（不用设置定时器）

我们要实现的功能是点击按钮，页面平滑的回到页面的最顶端。这是css部分简单的设置了1.去出了杂七杂八的边距2.设置背景颜色3.p标签的底部距离，居中4.图片的定位位置，宽高<style> *{ margin: 0; padding: 0; list-style: none; border: none; } body{ background-color: #cc.

2020-05-24 16:20:10 206

weixin_47863686的博客