影片Vue01
1.Vue (Part_1 > Lab_HelloVueJS > hello_VueJs.HTML)
(1)引用vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
(2)建立显示区 {{}}等同react{}
<div id="app1">{{ message }}</div>
(3)宣告app1，Vue在HTML与DATA之间，DATA改变立即显示
用法：{{}} 物件
Vue特性：无需使用类似React setState也会更新内容(测试：检查後输入app1.message = 123)
<div id="app1">{{ message }}</div>
var app1 = new Vue({
// element
el: "#app1",
// 与{{ message }}</div>对应
data: {
message: "Hello Vue!",
},
});
(4)宣告app2
用法：v-bind:title、:title 物件
<div id="app2">
<!-- title HTML语法 -->
<span title="滑鼠放到此处会显示提示"> 请将滑鼠移动到本区上方1 </span><br />
<!-- 5. v-bind:title Vue语法 等同{{}} -->
<!-- 方法1. -->
<span v-bind:title="message"> 请将滑鼠移动到本区上方2 </span><br />
<!-- 方法2. 简写-->
<span :title="message"> 请将滑鼠移动到本区上方3 </span><br />
</div>
//用法：v-bind:title、:title
var app2 = new Vue({
// element
el: "#app2",
// 与v-bind:title="message"对应
data: {
message: Date(),
},
});
(5)宣告app3
用法：v-if booling
无需使用类似React setState也会更新内容(测试：检查後输入app3.seen = ture ;)
<div id="app3">
<span v-if="seen">Now you see me</span>
</div>
var app3 = new Vue({
// element
el: "#app3",
data: {
seen: true,
// seen: false,
},
});
使用在事件v-on + if else
<div id="app3_1">
<!-- @ 是 v-on 的缩写 -->
<button @click="seen=!seen">点我观看v-if-else</button>
<span v-if="seen">v-if</span>
<span v-else>v-else</span>
</div>
(6)宣告app4
用法：v-for for回圈
<!-- 9. for回圈 todoItem 可以改 但要一致 此处只是要求要一个变数-->
<div id="app4">
<!-- todoList变数内 的 text-->
<ol>
<li v-for="todoItem in todoList">{{ todoItem.text }}</li>
</ol>
<!-- todoList变数内 的 text + key -->
<ul>
<li v-for="(doItem, key) in todoList">{{doItem.text}} -- {{key}}</li>
</ul>
<ul>
<!-- .text 几个跑几次 -->
<li v-for="todoItem in todoList">A</li>
</ul>
</div>
var app4 = new Vue({
// element
el: "#app4",
data: {
todoList: [{ text: "Learn JavaScript" },
{ text: "Learn Vue" },
{ text: "Build something awesome" }],
},
});
(7)宣告app1_1
用法：function v-on=@ 事件
<div id="app1_1">
{{ message }}<br />
<!-- reverseMessage方法名称 -->
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
var app1_1 = new Vue({
el: "#app1_1",
data: {
message: "Hello Vue!",
},
// 方法
methods: {
// 无需使用=>函式也能抓到this
reverseMessage: function () {
this.message = this.message.split("").reverse().join("");
// this.message = DATA();
},
},
});
(8)宣告app1_2
用法：function v-on 事件 并 + 参数
<div id="app1_2">
{{ message }}<br />
<!-- reverseMessage方法名称 -->
<button v-on:click="reverseMessage(3)">Reverse Message</button>
</div>
var app1_2 = new Vue({
el: "#app1_2",
data: {
message: "Hello Vue!",
},
// 方法
methods: {
// 无需使用=>函式也能抓到this
reverseMessage: function (x) {
// split把字串拆成[] ; reverse相反 ; join连接在一起
this.message = x;
// this.message = DATA();
},
},
});
(9)宣告app1_3
v-mould 双向改变
用法：input = text 显示值
<div id="app1_3">
<input v-model="message" /><br />
{{ message }}<br />
<!-- reverseMessage方法名称 -->
<button v-on:click="reverseMessage">此处资料会随着text换掉</button>
</div>
(10)宣告app5
用法：回圈如何知道点到第几个?(侦错用，放入变数)
<div id="app5">
<!-- todoList变数内 的 text + key -->
<ul>
<li v-for="(doItem, key) in todoList" v-on:click="liClick(key)">{{doItem.text}} -- {{key}}</li>
</ul>
</div>
var app5 = new Vue({
// element
el: "#app5",
data: {
todoList: [{ text: "Learn JavaScript" }, { text: "Learn Vue" }, { text: "Build something awesome" }],
},
methods: {
liClick: function (x) {
alert(x);
},
},
});
2.Vue CLI command line
透过命令列产生专案
(1)终端机下，查看是否有安装过Vue物件
C:\XXX\VueJS
按下 Ctrl + ` 组合键也可开启终端机视窗
vue --version 查看是否有安装过Vue物件
第一次通常没有
(2)安装Vue物件
npm install -g @vue/cli
-g 全域安装
(3)建立 Vue.js 专案
vue create hello-vue-cli
利用上下键切换，选择
Default (Vue 3) ([Vue 3] babel, eslint)
选好之後，按下键盘键
出现hello-vue-cli资料夹
(4)开启hello-vue-cli终端机，并跑服务器
npm run serve
如果浏览器没有自动启动，请手动在浏览器输入:
http://localhost:8080/
(5)建立AppHeader.vue档案
hello-vue-cli\src\components\AppHeader.vue
public资料夹内是前端
src/main.js把App.vue内的App物件放到public/index/内的#App
(6)建立AppHeader元件於AppHeader.vue内
<template>
<header>
<!-- AppHeader元件放在这 -->
<h1>{{ headerMessage }}</h1>
<hr />
</header>
</template>
<script>
export default {
name: "AppHeader", //AppHeader元件
data() {
return {
headerMessage: "eeeeeeeeeeeeeeeeeeeeeeeeeeeHello! Vue.js",
};
},
};
</script>
(7)把AppHeader元件显示出来
hello-vue-cli\src\app.vue
import AppHeader from './components/AppHeader.vue'
export default {
name: 'App',
components: {
HelloWorld,
AppHeader
}
}
查看画面，会改变
http://localhost:8080/
3.把React改成Vue专案
VUEJS > React_demo_change_Vue
(1)复制React档案(Lab_WebAPI\public\index_已连线资料库.html)
css、fonts、js、index_已连线资料库.html
(2)贴到React_demo_change_Vue，并复制一份改名为index.html
(3)引用Vue.js
index.html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
(4)制作元件
<div id="app1">{{ message }} + {{ date }}</div>
var app1 = new Vue({
el: "#app1",
data: {
message: "Hello Vue!",
date: Date(),
newsList: [
{ newsId: 1, ymd: "2017-05-01", title: "Item 1" },
{ newsId: 2, ymd: "2017-05-01", title: "Item 2" },
{ newsId: 3, ymd: "2017-05-02", title: "Item 3" },
{ newsId: 4, ymd: "2017-05-03", title: "Item 4" },
{ newsId: 5, ymd: "2017-05-04", title: "Item 5" },
],
},
});
(5)让画面(html)只留下First item
(6)制作回圈for在First item
<li v-for="(newsItem, key) in newsList"
此处注意，要记得绑#app1，否则吃不到(有区域性)
(7)First item由固定改为变数{{newsItem.title}}
(8)并增加[{{newsItem.ymd}}]
(9)按钮增加事件
<button v-on:click="editButtonClick(key)"
(10)增加元件方法
methods: {
editButtonClick: function (key) {
alert(key);
},
},
此处的key由(6)取得
(11)新增对话盒元件
var dlg = new Vue({
el: "#newsModal",
data: {
title: "aaa",
ymd: "bbb",
},
});
(12)对话盒增加v-mould 双向改变
v-model="title"
v-model="ymd"
(13)变更app1方法
跳出对话盒
methods: {
editButtonClick: function (key) {
alert(key);
$("#newsModal").modal({ backdrop: "static" });
},
},
(14)让title与ymd由固定转变数
(14-1)dlg元件
var dlg = new Vue({
el: "#newsModal",
data: {
title: "",
ymd: "",
},
});
(14-2)app1元件方法新增抓值
methods: {
editButtonClick: function (key) {
// alert(key);
dlg.title = this.newsList[key].title;
dlg.ymd = this.newsList[key].ymd;
$("#newsModal").modal({ backdrop: "static" });
},
},
(15)确定纽绑事件，让编辑钮可以使用
(15-1)按编辑纽时，让被编辑的元素key=-1
methods: {
editButtonClick: function (key) {
dlg.currentIndex = key; //按确定按钮时，送新的key值(-1)进去
var dlg = new Vue({
currentIndex: -1,
(15-1)按下确定时，抓-1值进行变更，并隐藏跳窗
<button type="button" v-on:click="okButtonClick" id="okButton"
class="btn btn-success">
<span class="glyphicon glyphicon-ok"></span> 确定
var dlg = new Vue({
el: "#newsModal",
data: {
currentIndex: -1,
title: "",
ymd: "",
},
methods: {
okButtonClick: function () {
var key = this.currentIndex;
app1.newsList[key].title = this.title;
app1.newsList[key].ymd = this.ymd;
$("#newsModal").modal("hide");
},
},
});
<<: Day 15-infrastructure 也可以 for each 之二: for_each meta-argument
>>: Day 10:让你见识我的一小部分力量，Ktor的网路请求
整理资料的API们：Array、Time Formats、Number Formats、Rando...
在 SMTP Mail 之後，今天要跟大家介绍第二种通知方式 Custom alertscripts...
前言 昨天的Linux PrivEsc中已经介绍过提权的基本概念了，所以今天就直接进入正题吧 正文 ...
时间过得真快，一转眼就来到做练习题的最後一天，明天要做最後总结 最後一天要来做练习题第八题 第八题要...
当客体机在 Proxmox VE 节点上运作且客体磁碟储存於节点的本机储存即区时，若想要让客体机的...