Day61 (Vue)

影片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");          },        },      });