标签归档：HTML

CSS设置鼠标为小手手型

发表评论

css中鼠标放上去变成手型怎么设置：其实就是一个属性的问题，

css的cursor属性 

cursor:pointer;

default：标准箭头 //这是默认的样式

pointer：手形光标  

wait ：等待光标  

text：I形光标  

vertical-text ：水平I形光标  

no-drop：不可拖动光标  

not-allowed：无效光标  

help：帮助光标  

all-scroll：三角方向标  

move  ：移动标  

crosshair：十字标

有的地方手型用hand，在这里隆重的说明，不要用hand，有些浏览器不支持。

windows下npm安装vue

发表评论

参考文章：https://www.cnblogs.com/liluxiang/p/9592003.html

※使用之前，我们先来掌握3个东西是用来干什么的。

· npm: Nodejs下的包管理器。

· webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。

· vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）

开始：

如图，下载8.9.3 LTS （推荐给绝大部分用户使用）

双击安装

可以使用默认路径，本例子中自行修改为d:\nodejs

一路点Next

点Finish完成

打开CMD，检查是否正常

再看看另外2个目录，npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，我们试图把这2个目录移动回到D:\nodejs

先如下图建立2个目录

然后运行以下2条命令

npm config set prefix “D:\nodejs\node_global”
npm config set cache “D:\nodejs\node_cache”

如上图，我们再来关注一下npm的本地仓库，输入命令npm list -global

输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站

输入命令npm config list 显示所有配置信息，我们关注一个配置文件

C:\Users\Administrator\.npmrc

使用文本编辑器编辑它，可以看到刚才的配置信息

检查一下镜像站行不行命令1

npm config get registry

检查一下镜像站行不行命令2

Npm info vue 看看能否获得vue的信息

注意，此时，默认的模块D:\nodejs\node_modules 目录

将会改变为D:\nodejs\node_global\node_modules 目录，

如果直接运行npm install等命令会报错的。

我们需要做1件事情：

1、增加环境变量NODE_PATH 内容是：D:\nodejs\node_global\node_modules

（注意，一下操作需要重新打开CMD让上面的环境变量生效）

一、测试NPM安装vue.js

命令：npm install vue -g

这里的-g是指安装到global全局目录去

二、测试NPM安装vue-router

命令：npm install vue-router -g

运行npm install vue-cli -g安装vue脚手架

编辑环境编辑path

对path环境变量添加D:\nodejs\node_global

win10以下版本的，横向显示PATH的，注意添加到最后时，不要有分号【;】

重新打开CMD，并且测试vue是否使用正常

注意，vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，

他的配置并不全放在根目录下的 webpack.config.js 中。

初始化，安装依赖

运行npm install安装依赖

npm run dev

成功界面，提示打开地址http://localhost:8080

自动打开浏览器http://localhost:8080/#/

npm run build

生成静态文件，打开dist文件夹下新生成的index.html文件

nmp下新建出来的vue01的目录描述：

懂的越多，不会的也就越多，知识之路是不断进取的

HTML学习笔记

发表评论

DOM

DOM - Document Object Model
This model can be described as a tree structure:
                      Document
                         |
                Root element:<html>
                         |
             ————————————————————————
            |                        |
   Element:<head>              Element:<body>
            |                        |
            |               ———————————————————
   Element:<title>         |                   |
            |          Element:<a>         Element:<h1>
            |       Attribute: "href"          |
            |              |                   |
   Text:"my title"   Text:"my link"       Text:"my header"

DOM是W3C（万维网联盟）的标准，它定义了访问HTML和XML文档的标准：W3C-DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
W3C-DOM分成3个不同的部分：
· 核心DOM：针对任何结构文档的标准模型
· XML DOM：针对XML文档的标准模型
· HTML DOM：针对HTML文档的标准模型

这里对HTML DOM进行详述
关于HTML DOM，它是：
· HTML的标准对象模型
· HTML的标准编程接口
· W3C标准

HTML DOM定义了所有HTML元素的对象和属性，以及访问它们的方法。

在HTML DOM中，所有事物都是节点（Node）。DOM是视为节点树的HTML。
· 整个文档是一个文档节点
· 每个HTML元素是元素节点
· HTML元素内的文本是文本节点
· 每个HTML属性是属性节点
· 注释是注释节点

关于节点的图述

HTML DOM方法和属性
HTML DOM方法是我们可以在节点上执行的动作。
HTML DOM属性是我们可以在节点设置和修改的值。

可通过JavaScript（或其他编程语言）对HTML DOM进行访问。
所有HTML元素被定义为对象，而编程接口则是对象的方法和属性。
方法是能执行的动作。属性是能够获取或设置的值。

如，一些常用的HTML DOM方法：
· getElementById
· appendChild
· removeChild
· getElementsByTagName
· getElementsByClassName
· replaceChild
· insertBefore
· createAttribute
· createTextNode
· getAttribute
· setAttribute

一些常用的HTML DOM属性：
· innerHTML – 获取元素内容
· parentNode
· childNode
· attributes

nodeName属性规定节点的名称↓↓

  • nodeName只读
  • 元素节点的nodeName与标签名相同
  • 属性节点的nodeName与属性名相同
  • 文本节点的nodeName始终是#text
  • 文档节点的nodeName始终是#document
  • nodeName始终包含HTML元素的大写字母标签名

nodeValue属性规定节点的值↓↓

  • 元素节点的nodeValue是undefined或null
  • 文本节点的nodeValue是文本本身
  • 属性节点的nodeValue是属性值

nodeValue属性规定节点的值↓↓

  • 元素节点的nodeValue是undefined或null
  • 文本节点的nodeValue是文本本身
  • 属性节点的nodeValue是属性值
<p id="intro">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>

nodeType属性：返回节点的类型，nodeType是只读的。
比较重要的节点类型有：
元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9

访问HTML元素等同于访问节点，可通过不同方式来访问HTML元素：

  • getElementById()
  • getElementsByTagName()：返回节点列表，为一个节点数组，如：
    var x = document.getElementsByTagName(“p”);
    可以通过下标访问节点，如访问第二个：y=x[1]，x.length为节点列表长度，返回的根节点不含样式，子节点包含所有的样式
  • getElementsByClassName()

HTML DOM的修改=改变元素、属性、样式和事件

  • 增删HTML元素
    创建：追加到已有元素上
    <div id="div1">
    <p id="p1">这是一个段落</p>
    <p id="p2">这是第二段落</p>
    </div>
    <script>
    var para = document.createElement("p");
    var node = document.createTextNode("这是个新段落");
    para.appendChild(node);
    var ele = document.getElementById("div1");
    ele.appendChild(para);
    </script>
    appenChild()是讲元素作为父元素的最后一个子元素进行添加，用insertBefore()插在元素前
    删除：removeChild()
    替换：replaceChild()
  • 改变HTML内容：最简单的方法是使用innerHTML属性
    （除了innerHTML，还可用childNodes和nodeValue属性获取元素内容，详见参考手册）
    <p id="p1">Hey</p>
    <script>
    document.getElementById("p1").innerHTML = "新内容在这";
    </script>
  • 改变CSS样式
    <p id="p1">hey</p>
    <p id="p2">world</p>
    <script>
    document.getElementById("p2").style.color = "blue";
    document.getElementById("p2").style.fontFamily = "Arial";
    document.getElementById("p2").style.fontSize = "larger";
    </script>
  • 改变HTML元素的属性
  • 改变事件
    HTML DOM允许在事件发生时执行代码
    当HTML元素“有事情发生”时，浏览器会生成事件：
    ~在元素上点击
    ~加载页面
    ~改变输入字段
    e.g. <input type="button" onclick="document.body.style.backgroundColor = 'lavender';" value="修改背景颜色" />

也可以：
<script>
function changeBg()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="changeBg()" value="修改背景色" />

HTML DOM允许JavaScript对HTML事件做出反应，当事件发生时，可以执行JavaScript，如用户点击某个元素时执行代码，则把JS代码添加到HTML事件属性中：onclick=JavaScript
HTML事件例子：
~用户点击鼠标时
~网页已加载
~图片已加载
~鼠标移动到元素上
~输入字段被改变
~HTML表单被提交时
~用户触发按键时

以下两个方式等效：
a) <button onclick="displayDate()">点我</button>
b) document.getElementById("myBtn").onclick = function(){dispalyDate()};

onload，onunload，onchange
用户进入或离开页面时，会触发onload和onunload事件
onload事件可用于检查方可的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
onload和onunload事件都可用于处理cookies
onchange事件常用于输入字段的验证，如：
<input type="text" id="fname" onchange="upperCase()" />

HTML DOM 事件对象参考手册：
https://www.w3school.com.cn/jsref/index.asp
https://www.runoob.com/jsref/jsref-tutorial.html

DOM根节点的两个特殊属性可以访问全部文档
~ document.documentElement 全部文档
~ document.body 文档主体

Vue.js学习笔记

发表评论

体积：33k
虚拟dom，更高的运行效率
双向数据绑定
生态丰富，基于vue.js的ui框架、常用组件
使用场景广泛

安装与部署
1、<script>引用
<script src="https://cdn.jsdelivr.net/npm/" />
2、CLI命令行工具使用,npm
3、CDN

创建第一个vue应用
视图+脚本
视图：<div id="app">
{{mes}}
</div>

脚本：
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
mes: 'hello vue!'
}
});
</script>

数据与方法
每个Vue应用是通过Vue函数创建新的Vue实例开始的
var vm = new Vue({});

<div id = "app">
{{a}} {{b}}
</div>
<script type="text/javascript">
var data = { a: 1 };
var vm = new Vue({
    el : "#app",
    data : data
});
data.a = 2;
</script>

Vue实例使用$区分方法和属性
e.g.
vm.data
vm.$watch —>方法list

生命周期
学习->API->生命周期钩子
生命周期函数不能使用箭头函数，箭头函数没有this
beforeCreate
created
beforeMount：相关的渲染函数首次被调用
mount ed：el创建成功
beforeUpdate：数据更新前
updated：数据更新完成
errorCaptured
activated, destroyed

模板语法
Vue.js使用用了基于HTML的模板语法，所有Vue.js的模板都是合法的HTML，能被遵循规范的浏览器和解析器解析。

文本：{{}}进行数据绑定
v-once，进行一次性插值

原始HTML，v-html标签可以使用html代码,v-bind绑定属性
<div id = "app">
<p v-html="rawHtml"></p>
<div v-bind:class="color">test…</div>
<p>{{number + 1}}</p>
<p>{{ ok? 'YES' : 'NO' }} </p>
<p>{{ mes.split('').reverse().join(' ') }} </p>
</div>

<script type="text/javascript">
var vm = new Vue({
    el: "#app",
    data:{
        msg: "hey",
        rawHtml: '<span style="color:red">this is should be red</span>',
        color: 'red1',
        number: 9 ,
        ok : 1
    }
});
<style type="text/css">
.red1{color: red;}
.blue1{color:blue: font-size:100px;}
</style>

指令
v-前缀的特殊属性
v-if=”seen”
参数，一些指令能接受参数
修饰符，用.指明 <div @click="click1">
<div @click.stop="click2">click here</div>
</div>

class与style绑定
v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '']"
v-bind:class="{active : isActive, green : isGreen}"

样式绑定图示

在中括号里可以使用条件表达式
{}只能是json数组

条件渲染
v-if v-else-if v-else：条件改变少适用
v-show：始终渲染，常切换适用

数组渲染
v-for item in items

数组渲染逻辑

事件绑定：v-on
<button v-on:事件名:”方法名(参数,…,$event)”>
事件名：不同元素拥有各自的事件，如click，dblclick
$event 是原始DOM事件 常用事件修饰符：stop,prevent,passive,capture,self,once 表单输入绑定

v-model 在input,textarea,select上进行数据双向绑定

vue的组件应用：全局组件注册

component的局部注册，是在实例中添加component部分，并注册其名称，如下示范：

<div id="app">
<button-counter></button-counter>
<test></test>
</div>
<script type="text/javascript">
Vue.component('button-counter', {
        props: ['title'],
        data: function () {
                return {}
        },
        template: '<div><h1>hi…</h1></div>',
        methods:{
        }
})
var vm = new Vue({
        el : "#app",
        data : {
        },
        methods:{
        clicknow : function (e) {
                console.log(e);
                }
        },
components:{
        test : {
                template:"<h2>h2…</h2>"
                }
       }
});
</script>

实际应用中很少如上这样局部注册，更多的是通过类似java那样的单文件注册来完成的：

import ComponentA from './ComponentA' 
import ComponentC from './ComponentC' 

export default { 
    components: { ComponentA, ComponentC }, // ... 
}

单文件注册需要进行环境配置：

· 安装 npm

npm 全称为 Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。

npm -v

· 由于网络原因 安装 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

· 安装 vue-cli

cnpm install -g @vue/cli

· 安装 webpack

webpack 是 JavaScript 打包器(module bundler)

cnpm install -g webpack

参考：Vue.js视频教程
Dcloud
Vue.js文字教程
Vue.js API