VUE的学习_从入门到放弃(一)

一、vue的功能及作用

  • 工作方式如下

1.不用操作DOM

2.单页面应用web项目 简称:SPA

3.当下各种新框架都采用的类似Vue或者类似React的语法去作为主语法,微信小程序/MpVue......

4.掌握Vue的开发语法,相当于掌握了新的开发模式,可以适应目前绝大多数的技术环境

  • Vue特点

1.数据驱动视图,可以让我们只关注数据

2.MVVM双向绑定

3.通过指令增强了html功能

4.组件化,复用代码

5.开发者一般只关注数据

  • Vue的安装及使用

1.直接通过路径引入,地址:https://vuejs.org/js/vue.min.js

2.直接下载在本地引入

3.采用npm安装的方式,命令:npm install vue

提示:注意Vue.js不支持IE8及其以下版本

示例demo:

<script src="https://vuejs.org/js/vue.min.js"></script>

 

<div  id="app">         {{msg}}     </div>          <script>         var vm = new Vue({             //el可以使用id选择器、calss选择器、dom对象             //el不能尝试使用html以及body             el:document.getElementById("app"),             data: {                     msg:"Hello world!"                              },         });     </script>

 

    在插值表达式中使用js表达式、三元运算符、方法调用 -->

        <p>{{string}}</p>         <p>{{count == 100}}</p>         <p>{{count < 100}}</p>         <p>{{count+10}}</p>         <p>{{string.split("|")}}</p>         <p>{{count < 100?"小于":“大于}}</p>

指令--凡是以v-开头的都叫vue指令

  • v-text和v-html   与  innerText和innerHTML相比较
  • 插值表达式 1.是插入时的数据渲染   2.尚未渲染完成时会出现丑丑的大括号
  • v-text、v-html是整体式的数据替换  2.尚未渲染完成时不会出现东西(渲染标签中事先有内容除外)
  • 注意,非必要时尽量不要使用或者禁止使用v-html,因为会有xss跨站脚本攻击
<div id="app">         <p v-text ="string"> 1236</p>         <p v-html ="string">46413</p>     </div>

  • v-if  更大的开销  适用于不平凡切换显示状态,并且初始渲染时不必渲染,多重判断时适合使用
  • v-show  开销较小  适用于平凡切换显示状态
     <p v-if ="isShow"> {{string}}</p>      <p v-show ="isShow">{{46413}}</p>

  • v-on :click  简写(@click)
  • @click.once只触发一次
  • click.prevent 阻止默认事件
  • click.stop 阻止冒泡事件
<button v-on:click="clickMe('Ultraman')">点击我</button>         <!-- click.once 只会触发一次 -->         <button @click.once="clickOnce">只触发一次</button>         <!-- click.prevent 阻止默认事件 -->         <a href="http://www.baidu.com" @click.prevent="stopjump">百度</a>         <div @click="alert(1)">             <!-- click.stop 阻止冒泡事件 -->             <div>                 <div @click.stop="alert(3)">                     我是div                 </div>             </div>         </div>

  •  input标签 change  v-bind模拟v-model的底层
    <input type="text" @change="change">
    <input type="text" v-bind:value="string" @input="inputChange($event)">

                change(){                     alert("数据改变了");                 },                 inputChange(e){                     console.log("变了");                     this.string = e.target.value;                 }                

  • v-for 迭代;循环
<ul>             <!-- array是需要渲染的对象 而item是每次接受迭代对象的别名 -->             <li v-for="item in array">{{item}}</li>             <!-- 始终记住,第一个参数是获取每次迭代的数据,第二个参数看实际情况,如果是迭代数组,则为数组的索引 -->             <li v-for="item in objectArray">{{item.id}}----{{item.name}}</li>             <!-- 如果是迭代对象,则顺序不同,第一个参数是属性的value,第二个参数为属性的key,第三个参数才是索引 -->             <li v-for="obj in object">{{boj}}</li>             <li v-for="(v,k,i) in object">{{k}}--{{v}}--{{i}}</li>             <!-- for循环 -->              <li v-for="num in 10">{{num}}--指定数据</li>  </ul>

  • v-bind 其作用是绑定标签上的所有属性
  • 当标签上的属性变量或者动态的亦或需要改变的
  • 简写“:”
<p v-bind:id="'ptest'"></p>         <p :id="idName"></p>         <p :class="showStyle?'p-style1':''">pppppp</p>         <p :class="'p-style1':showStyle">pppppp</p>         <p :class="'[bolder',showStyle?'p-style1':'p-style2']">pppppp</p>         <p :class="'[bolder',{'p-style1':'p-style2'}]">pppppp</p>         <p :style="color:'red'">ppppppp</p>         <button @click="changeColor">变色</button>   CSS <style>         .p-style1{             background-color: aquamarine;             color:red;         }         .p-style2{             background-color: aquamarine;             color:red;         } </style>

  •   v-model、v-cloakd和v-once的作用
  <div id="app" v-cloak>         {{msg}}         {{range}}         <br>         <!-- v-model 可以处理input、textArea、select、radio、checkbox、botton -->         <!-- c-cloak cue中自带的指令,作用是当加载完成后移除指令的属性 即,我们希望任何没有在加载完成前呈现的样式都可通过v-cloak呈现-->
     <!-- v-once 使用该指令,页面视图只渲染一次 -->   <!-- <input type="text" :value="msg" @input="changeInput($event)"> --> <input type="text" v-model="msg"> <input type="text" v-model="range"> <input type="range" v-model="range"> </div> <script> setTimeout(function(){ var vm = new Vue({ el:"#app", data: { msg:"Hello", range:100 }, methods: { changeInput(e){ this.msg = e.target.value; } }, });},5000)

 

推荐这些文章:

HTML 5 从入门到入土

前端的好处是所见即所得,和数据库一样,不会很枯燥。
有些字符,颜色,标签可以现用现查。

HTML (超文本标记语言) (HyperText Markup Language)
一种创建网页的标准标记语言,使用HTML建立自己的WEB站点,在浏览器上运行的语言。
HTML是一种标记语言,不是编程语言,有两部分组成:标签,标签内的文本
...

列表学习总结

<!--有序列表应用范围:试卷,问答...--><ol> <li>java</li> <li>pathion</li> <li>运维</li> <li>前段</li> <li>...

【html学习】记录

1.<html></html>
2.<head></head>
3.<title></title>
4.<body></body>
5.<h></h>
6.<p></p>
7.<a hre...

HTML03:列表、表格标签和媒体元素

列表标签

无序列表、有序列表、自定义列表

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">
<title>我的网页</title>

</head>

...

li ul制作二级导航菜单IE8下奇葩问题

问题
代码:

<!DOCTYPE html>
<html>
<head>
<title>仿照公司首页菜单</title>
<meta charset="gb2312">
<style type="text/css">
body{...

vue进阶(入门)

vue.js

vue.js只聚焦视图层,是构建数据驱动web界面的一个库。

数据绑定

定义:将数据和视图相关联,当数据发生变化时,可以自动更新视图。
语法
1) 插值
    使用双大括号{{}},双大括号会将里面的值当做字符串进行处理;而如果值是HTML片段时,则使用三个大括号进行绑定 ...

HTML标签元素常用列表

HTML 基本文档

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>

基本标签(Basic Tag...

HTML和jQuery的学习

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <!-- src路径 alt图像不能显示...

leetcode队列单调栈- 滑动窗口中的最大值

import leetcode4.test.MonotonicQueue;

import java.util.ArrayList;
import java.util.LinkedList;
import java.util.List;

/**
<p>给你一个整数数组 <code>nums</code&g...

去除button默认样式

不加样式之前的: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> ...

文章标题:VUE的学习_从入门到放弃(一)
文章链接:https://www.dianjilingqu.com/1890.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>