枕头想进步-优快云博客

原创 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 243

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

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

2021-02-27 16:41:07 287

原创 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 215

原创 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 234 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 416

原创 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 168

原创 Vue.js 一、插值操作

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

2020-06-18 10:56:38 167

原创 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 224

原创 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 211

原创 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 777 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 399

原创 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 197

原创 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 255

原创 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 275

weixin_47863686的博客