Vue 官网学习笔记
VUE介绍
vue git 地址：https://github.com/vuejs/vue/projects
Vue 官网教程地址：https://cn.vuejs.org/v2/guide/installation.html
vue 官网API地址： https://cn.vuejs.org/v2/api/
vue官方学习视频： https://learning.dcloud.io/#/?vid=0
学习版本：2.6.11 (官网已经有3.X 版本的了)
HBuilderX 编辑器3.1.2下载地址： https://www.onlinedown.net/soft/1217175.htm
hbuilder绿色版
uni-app官网： https://uniapp.dcloud.io/
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
HbuilderX 编译器的使用
less
node
npm
cnpm
vue-cli
webpack
uni-app
v-**** 内容
v-model v-bind v-if v-else v-else-if v-for v-html v-is v-on v-cloak
Vue.js 视频 教程
https://learning.dcloud.io/#/?vid=14
序言 vue.js介绍
第1节 安装与部署
第2节 创建第一个vue应用
第3节 数据与方法
第4节 生命周期
第5节 模板语法-插值
第6节 模板语法-指令
第7节 class与style绑定
第8节 条件渲染
第9节 列表渲染
第10节 事件绑定
第11节 表单输入绑定
第12节 组件基础
第13节 组件注册
第14节 单文件组件
第15节 免终端开发vue应用
序言 vue.js 介绍
vue.js 渐进式的 javaScript框架
优点：
体积小 33K
虚拟DOM
双向数据绑定
vue.js 框架多？ 生态丰富？
第1节 安装与部署
开发版本： https://cn.vuejs.org/js/vue.js
生产版本： https://cn.vuejs.org/js/vue.min.js
下载开发版本后将其放到 与.html 同一文件夹下 ，这样新建页面就可以用 src="./vue.js" 引用vue了
index01addvuejs.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" charset="UTF-8" src="./vue.js"></script>
</head>
<body>
<script>
</script>
</body>
</html>
第2节 创建第一个vue应用
1.引入vue.js
2.编写视图区 div
3.编写脚本区 js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" charset="UTF-8" src="vue.js" ></script>
</head>
<body>
<!-- 视图区 -->
<div id="app">
{
{
message }} ----{
{
name}}
</div>
<!-- 脚本区
el== element
-->
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
name : "Vue"
}
});
</script>
</body>
</html>
第3节 数据与方法
// 记录 foo 变量 改变前 ，改变后的值
vm.$watch('foo',function(newVal,oldVal){
console.log(newVal,oldVal);
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" charset="UTF-8" src="vue.js">
</script>
</head>
<body>
<div id="app">
{
{
foo }}
<!-- {
{
a }} {
{
b }} -->
</div>
<script type="text/javascript">
var obj1={
foo: 'bar1'
}
// Object.freeze(obj1);
//var vmdata={a:11 , b: 22 ,c : obj1};
var vm=new Vue({
el: "#app",
data: obj1
//data: vmdata
});
// 记录 foo 变量 改变前 ，改变后的值
vm.$watch('foo',function(newVal,oldVal){
console.log(newVal,oldVal);
})
vm.$data.foo="ssss";
vm.$data.foo="s2";
vm.$data.foo="s3";
</script>
</body>
</html>
第4节 生命周期
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js" charset="UTF-8">
</script>
</head>
<body>
<div id="app">
{
{
a }}
</div>
<script type="text/javascript">
var vmdata={
a: 1 };
var vm=new Vue({
el: '#app',
data: vmdata,
beforeCreate:function(){
console.log('beforeCreate');
},
created() {
console.log("created");
},
beforeMount() {
console.log("beforeMount");
},
mounted() {
console.log("mounted");
},
beforeUpdate() {
console.log("beforeUpdate");
},
updated() {
console.log("updated");
},
beforeDestroy() {
console.log("beforeDestroy");
},
destroyed() {
console.log("destroyed");
}
});
setTimeout(function(){
vm.$data.a="change ...3 sec";
},3000);
setTimeout(function(){
vmdata.a="change ... 6 sec";
},6000);
</script>
</body>
</html>
第5节 模板语法-插值
v-once
v-html
— v-bind:属性 =""
v-bind:id=""
v-bind:class=“color01”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" charset="UTF-8" src="vue.js">
</script>
</head>
<body>
<div id="app" >
{
{
a }}
<p>
Using mustaches:{
{
rawHtml }}
</p>
<p>
Using v-html directive: <span v-html="rawHtml"></span>
</p>
<div v-bind:class="color">test v-bind </div>
<div>{
{
number +1 }}</div>
<div>
{
{
ok?'yes':'no' }}
</div>
<div>{
{
message}}</div>
<div>
{
{
message.split('').reverse().join('')}}
</div>
</div>
<!-- <span style="color: red;">this is a red span </span> -->
<script type="text/javascript">
var vmdata={
a:2,
rawHtml: 'this is a red span ',
color: 'red',
number: 10,
ok: 1,
message : '123456789abcd'
};
var vm=new Vue({
el: '#app',
data:vmdata
})
</script>
<style type="text/css">
.red{
color:red;}
.blue{
color: blue; font-size: 100px;}
.white{
color: white;}
</style>
</body>
</html>
第6节 模板语法-指令
6.1 指令
v-if=“true”
6.2 参数
一些指令能够接收一个参数，在指令名称之后冒号表示
v-bind:href=“url”
v-on:click=“click1”
< div v-on:click=“click1”> 等同于
< div @click=“click1”>
6.3 修饰符
@click.stop
当前的click事件一旦执行，就要停下啦
修饰符：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" charset="UTF-8" src="vue.js">
</script>
</head>
<body>
<div id="app">
{
{
a }}
<p v-if="see"> you can see me </p>
<a v-bind:href="url">........</a>
<!-- v-on:click == @click -->
<div v-on:click="click1">
<div v-on:click="click2">
click me
</div>
</div>
<!-- v-on:click == @click -->
<div @click="click1">
<div @click="click2">
click me 2222
</div>
</div>
</div>
<script type="text/javascript">
var vmdata={
a: 1 ,
see: true,
url: "http://www.baidu.com/"
};
var vm= new Vue({
el: '#app',
data: vmdata,
methods:{
click1:function(){
console.log('click 1 ....');
},
click2:function(){
console.log('click 2 ....');
}
}
});
</script>
</body>
</html>
第7节 class与style绑定
hi vue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" charset="UTF-8" src="vue.js">
</script>
</head>
<!--
v-bind class 对象形式
v-bind:class="{activeRed:isRed,activeGreen:isGreen}"
v-bind class 数组形式1 2 3
v-bind:class='["activeRed","activeGreen"]'
v-bind:class="[ isRed ? 'activeRed' : '' , isGreen ? 'activeGreen': '']"
v-bind:class='[ isRed ? "activeRed" :"" , isGreen ? "activeGreen": ""]'
-->
<body>
<div id="app">
{
{
a }}
<div
class="commClass"
v-bind:class="[ isRed ? 'activeRed' : '' , isGreen ? 'activeGreen': '']"
style="width: 50px; height: 50px; background-color: aquamarine;">
hi vue
</div>
<div :style="{ color: styColorRed, fontSize: stySize }">
hi i am style
</div>
</div>
<script type="text/javascript">
var vmdata={
a:1,
isRed: true ,
isGreen: true,
styColorRed: '#FF0000',
stySize: '50px',
};
var vm=new Vue({
el: '#app',
data:vmdata
})
</script>
<style>
.commClass{
font-weight: 900;}
.activeRed{
color: #FF0000;}
.activeGreenBack{
background-color: green;}
</style>
</body>
</html>
第8节 条件渲染
v-if
v-else-if
v-else
v-show ----- display:none
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" charset="UTF-8" src="vue.js">
</script>
</head>
<body>
<div id="app">
{
{
a }}
<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>
<div v-show="isOK">
hello v-show
</div>
</div>
<script type="text/javascript">
var vmdata={
a: 1,
type: "A",
isOK: false,
};
var vm=new Vue({
el: "#app",
data:vmdata,
});
</script>
</body>
</html>
第9节 列表渲染
v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" charset="UTF-8" src="vue.js">
</script>
</head>
<body>
<div id="app">
{
{
a }}
<ul>
<li v-for="item,index in items" v-bind:key="index" >
{
{
index }} :: {
{
item.message }}
</li>
</ul>
<br>
<ul>
<li v-for="value,key in object" v-bind:key="key">
{
{
key }} : {
{
value }}
</li>
</ul>
</div>
<script type="text/javascript">
var vmdata={
a:1 ,
items:[
{
message: 'foo'},
{
message: 'bar'},
{
message: 'haha'}
],
object:{
title: '好人老李全传',
author: '老李',
publicAd: '人名录',
}
};
var vm =new Vue({
el: '#app',
data:vmdata,
});
</script>
</body>
</html>
第10节 事件绑定
v-on:[事件] — 可以绑定所有Html 事件
v-on:click=“counter+=1”
v-on:dblclick=“greet”
v-on:click=“greet2(‘li’,$event)”
v-on:click.stop=“doThis” ----事件修饰符
事件修饰符：
.stop
.prevent
.capture
.self
.once
.passive
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" charset="UTF-8" src="vue.js">
</script>
</head>
<body>
<div id="app">
{
{
a }}
<br>
<button v-on:click="counter+=1">数值：{
{
counter }}</button>
<br>
<button v-on:dblclick="greet">greet</button>
<br>
<button type="button" v-on:click="greet2('li',$event)">eventshow</button>
</div>
<script type="text/javascript">
var vmdata={
a: 1,
counter: 0,
name: '老李',
}
var vm=new Vue({
el:'#app',
data:vmdata,
methods:{
greet: function(){
alert('hi'+ this.name);
},
greet2: function (str,e){
alert(str);
console.log(e);
}
}
})
</script>
</body>
</html>
第11节 表单输入绑定
v-model="message"
text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" charset="UTF-8" src="vue.js">
</script>
</head>
<body>
<div id="app">
{
{
a }}
<div id="example-1">
<input v-model="message" placeholder="edit me">
<p>Message is: {
{
message }}</p>
<textarea v-model="message" placeholder="edit me">
</textarea>
<p style="white-space: pre-line;"> message is : {
{
message}}</p>
</div>
<div id="example-2">
<input type="checkbox" name="jack" id="jack" value="Jack" v-model="checkedNames" />
<label for="jack">Jack</label>
<input type="checkbox" name="john" id="john" value="John" v-model="checkedNames" />
<label for="john">John</label>
<input type="checkbox" name="mike" id="mike" value="Mike" v-model="checkedNames" />
<label for="mike">Mike</label>
<br>
<span id="span1">
Checked names: {
{
checkedNames }}
</span>
</div>
<div id="example-3">
<input type="radio" name="one" id="one" value="One" v-model="radioName" />
<label for="one">One</label>
<input type="radio" name="two" id="two" value="Two" v-model="radioName" />
<label for="two">Two</label>
<br>
<span>
Checked Radio: {
{
radioName }}
</span>
</div>
<button type="button" @click="submit2">submit</button>
</div>
<script type="text/javascript">
var vmdata={
a: 1 ,
message: "",
checkedNames:["Jack",""],
radioName:'',
};
var vm =new Vue({
el: '#app',
data: vmdata,
methods:{
submit:function(){
console.log(this.radioName)
},
submit2: function(){
var postObj={
msg1: this.message,
msg2: this.checkedNames,
mesg3: this.radioName,
}
console.log(postObj);
}
}
})
</script>
</body>
</html>
第12节 组件基础
Vue.component(“button-counter1”,{ … … });
slot
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" charset="UTF-8" src="vue.js" >
</script>
</head>
<body>
<div id="app">
{
{
a }}
<br>
<button-counter1></button-counter1>
<br>
<button-counter1></button-counter1>
<br>
<br>
<!-- v-on:clicknow_inner="clicknow_outer" 事件绑定 将控件内部的clicknow_inner事件 绑定到页面clicknow_outer事件中 -->
<button-counter2 prop_name="laoli" v-on:clicknow_inner="clicknow_outer"></button-counter2>
<br>
<br>
<button-counter3 prop_name="laoliu" @clicknow_inner="clicknow_outer">
<!-- this is for slot -->
<h1>slot 1111</h1>
<h2>slot 2222</h2>
</button-counter3>
</div>
<script type="text/javascript">
Vue.component("button-counter1",{
data: function(){
return {
count:0 ,
}
},
template:''
});
Vue.component('button-counter2',{
template:'',
data: function(){
return {
count:0,
}
},
props:["prop_name"],
methods:{
clickfun : function(){
this.count++;
this.$emit('clicknow_inner',this.count);
}
}
})
Vue.component("button-counter3",{
template:'第12节 附属图片 – 自定义事件执行调用过程
第13节 组件注册
建议使用第一种 羊肉串方式
使用 kebab-case Vue.component(‘my-component-name’, { /* … / })
使用 PascalCase Vue.component(‘MyComponentName’, { / … */ })
全局注册
局部注册
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" charset="UTF-8" src="vue.js">
</script>
</head>
<body>
<div id="app">
{
{
a }}
<br>
<!-- 全局组件 -->
<my-button title2="mytitle" v-on:inner_click="out_click" >mybtn2</my-button>
<!-- 局部组件 -->
<local_component2 v-on:inner_click2="out_click_4_innerComp" ></local_component2>
</div>
<script type="text/javascript">
// 全局组件
Vue.component("my-button",{
template:'',
data:function(){
return {
count:0,
}
},
props: ["title2"],
methods:{
// 在myclik事件中触发 inner_click 事件,
// inner_click 事件是个中介 ,用于触发 用户自定义的out_click 事件
myclick: function(){
alert("I am myclick ");
this.count++;
this.$emit('inner_click',this.count)
}
}
});
var vmdata={
a:1,
};
var vm =new Vue({
el: "#app",
data: vmdata,
methods:{
out_click: function( str ){
alert("I am out click "+ str );
},
out_click_4_innerComp:function(){
alert(" I am inner Comp ");
},
},
components:{
// 局部组件
local_component2:{
template:"LocalComponent_123456
",
data: function(){
return {
}
},
props:[],
methods:{
myclick2:function(){
console.log("myclick2");
this.$emit('inner_click2');
}
}
}
}
});
</script>
<style type="text/css">
</style>
</body>
</html>
第13节 附属图片 全局vs局部组件
第14节 单文件组件
npm 相关知识 参考
Node.js 学习笔记：https://blog.csdn.net/wei198621/article/details/116350962
1. node.js 安装
2. 修改默认node镜像下载地址
3. 安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
4. cnpm install -g @vue/cli
5. cnpm install -g webpack
6. 进入目录
cd C:\workspace\workspace_front\vue\vue官方demo\vueCliCreate
7. 执行 vue ui 指令 会进入vue cli 的图形化管理界面
C:\workspace\workspace_front\vue\vue官方demo\vueCliCreate>vue ui
Starting GUI...
Ready on http://localhost:8000
新建项目
http://localhost:8000/project/select
两分钟后，自动创建成功
http://localhost:8000/dashboard
默认新建的目录结构
新增组件
新增一个组件 comp02.vue
<template>
<h2 class="red"> test .... {
{
msg }}</h2>
</template>
<script>
export default{
name: 'comp02',
props:{
msg:{
type: String,
default:"test msg",
}
},
methods:{
},
data(){
return {
}
}
}
</script>
<style>
.red{
color: red;}
</style>
用户控件使用三大步 1.导入 2.注册 3.使用
用户控件使用三大步 0.创建用户控件 1.导入 2.注册 3.使用
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<!--- 03 use 使用comp02 -->
<comp02></comp02>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
//--- 01 defined 导入自定义的组件
import comp02 from './components/comp02.vue'
export default {
name: 'App',
components: {
HelloWorld,
//--- 02 registered 注册 comp02
comp02,
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
第15节 免终端开发vue应用 uniapp
nniapp 官网：
https://uniapp.dcloud.io/
uniapp 组件 ：
https://uniapp.dcloud.io/component/README
uniapp 插件市场：
https://ext.dcloud.net.cn/
uni-app 和HBuilderX 都是DCloud公司出品的，前者是框架，后者是idea,
它们互相搭配，使得基于vue.js 开发项目变得更加简单和高效，
让开发者将精力放在业务逻辑上。
新建uni-app 应用
打开HbuilderX 编辑器， 文件–》 新建–》 项目
uni-app生成目录结构介绍
