W8-JQuery常用效果+Vue初步

最新推荐文章于 2024-07-25 11:26:35 发布

小红帽的狼外婆_x

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量115

点赞数

文章标签： vue html java

本文链接：https://blog.csdn.net/reL_iuhgc34n_x/article/details/118367250

版权

W8-JQuery常用效果+Vue初步

8.1JQuery常用效果
8.2安装和简介
8.3VUE起步和模板语法
- Vue.js 起步
- Vue.js 模板语法
8.4 条件语句和循环语句
8.5样式绑定
8.6事件处理器

8.1JQuery常用效果

8.1.1操作css

jQuery 拥有若干进行 CSS 操作的方法。

addClass() - 向被选元素添加一个或多个类

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

$("button").click(function(){
  $("body div:first").addClass("important blue");
});

removeClass() - 从被选元素删除一个或多个类

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

toggleClass() - 对被选元素进行添加/删除类的切换操作

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

css() - 设置或返回样式属性
返回 CSS 属性css("propertyname");
设置 CSS 属性css("propertyname","value");
设置多个 CSS 属性css({"propertyname":"value","propertyname":"value",...});

.important
{
        font-weight:bold;
        font-size:xx-large;
}
 
.blue
{
        color:blue;
}

8.1.2添加元素

jQuery append() 方法

jQuery append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）。$("p").append("追加文本");

jQuery prepend() 方法
jQuery prepend() 方法在被选元素的开头插入内容。$("p").prepend("在开头追加文本");
通过 append() 和 prepend() 方法添加若干新元素

function appendText(){
    var txt1="<p>文本-1。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本-2。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本-3。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。$("img").after("在后面添加文本");

jQuery before() 方法在被选元素之前插入内容。$("img").before("在前面添加文本");

通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

function afterText()
{
    var txt1="<b>I </b>";                    // 使用 HTML 创建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
    var txt3=document.createElement("big");  // 使用 DOM 创建元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
}

8.1.3删除元素

jQuery remove() 方法
jQuery remove() 方法删除被选元素及其子元素。$("#div1").remove();
jQuery empty() 方法
jQuery empty() 方法删除被选元素的子元素。$("#div1").empty();
过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
下面的例子删除 class=“italic” 的所有 <p> 元素：$("p").remove(".italic");

8.2安装和简介

<div id="app">
  <p>{{ message }}</p>
</div>

以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

8.3VUE起步和模板语法

Vue.js 起步

每个 Vue 应用都需要通过实例化 Vue 来实现。

语法格式如下：var vm = new Vue({ // 选项 })

定义数据对象

data 用于定义属性，实例中有三个属性分别为：site、url、alexa。

methods 用于定义的函数，可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>

Vue.js 模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

插值

文本

数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：<div id="app"> <p>{{ message }}</p></div>

Html

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script>

属性

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>

表达式

<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'RUNOOB',
    id : 1
  }
})
</script>

指令

<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

参数

<div id="app">
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'
  }
})
</script>

修饰符<form v-on:submit.prevent="onSubmit"></form>
用户输入

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>

过滤器

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

缩写


<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

或
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

8.4 条件语句和循环语句

v-if
条件判断使用 v-if 指令：<p v-if="seen">现在你看到我了</p>

v-else
可以用 v-else 指令给 v-if 添加一个 “else” 块：

<div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>

v-else-if
v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：

<div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>

v-show
我们也可以使用 v-show 指令来根据条件展示元素：<h1 v-show="ok">Hello!</h1>

循环使用 v-for 指令

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

<ul>
  <template v-for="site in sites">
    <li>{{ site.name }}</li>
    <li>--------------</li>
  </template>
</ul>

v-for 迭代

div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

8.5样式绑定

Vue.js class
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

class 属性绑定
我们可以为 v-bind:class 设置一个对象，从而动态的切换 class:<div v-bind:class="{ 'active': isActive }"></div>

数组语法
我们可以把一个数组传给 v-bind:class <div v-bind:class="[activeClass, errorClass]"></div>

Vue.js style(内联样式)

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>

8.6事件处理器

事件监听可以使用 v-on 指令：

<div id="app">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})
</script>

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

小红帽的狼外婆_x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
W8-JQuery常用效果+Vue初步

W8-JQuery常用效果+Vue初步8.1JQuery常用效果8.1.1操作css8.1.2添加元素8.1.3删除元素8.2安装和简介8.3VUE起步和模板语法Vue.js 起步Vue.js 模板语法8.4 条件语句和循环语句8.5样式绑定8.6事件处理器8.1JQuery常用效果8.1.1操作cssjQuery 拥有若干进行 CSS 操作的方法。addClass() - 向被选元素添加一个或多个类$("button").click(function(){ $("h1,h2,p").ad
复制链接

扫一扫