Web全堆疊~38.Vue

上一期

基本語法

template和script互動

<template>
  <div id="app">
        <div>
            我是{{name}},我的師傅是{{master}},我要討伐{{king}}

            我是{{person.name}} 今年 {{person.age}} 歲
        </div>
  </div>
</template>

<script>
    // export是一個資料物件,我們可以寫多個屬性或者函式
    export default {
        data(){
            return{
                name:"姜子牙",
                master:"元始天尊",
                king:"紂王",
                person:{
                    name:"張桂芳",
                    age : 16
                }
            }
        }
    }
</script>

條件判斷加單機事件

<!--   template  -->
	 <div>
            我是{{person.name}} 今年 {{person.age}} 歲

            <!--  單擊事件,直接寫動作,然后用 v-on: 系結  -->
            <input type="button" v-on:click="person.age = person.age + 1" value="年齡 + 1"/>
            <!--  也可以在下面定義一個函式(也可以叫方法)拿來呼叫,系結的話也可以用@來作為v-on的簡寫   -->
            <input type="button" @click="AddAge" value="年齡-1"/>
            <!--  if判斷  -->
            <span v-if="person.age<18">未成年</span>
            <span v-else-if="person.age >= 18 && person.age < 35">青年</span>
            <span v-else-if="person.age >= 35 && person.age < 50">壯年</span>
            <span v-else-if="person.age >= 50 && person.age < 60">中年</span>
            <span v-else>老年</span>
        </div>
<!--  script : export default -->
   methods:{
            //定義當前組件中可以使用的所有函式
            AddAge:function () {
                this.person.age = this.person.age - 1;
            }
        }

回圈陳述句

<!--   template  -->
		<div>
            <!--
              v-bind:key 系結一個變數,相當于定義一個臨時變數
              v-for="變數 in 集合" 變數是使用某已有變數,不能定義新變數，
             -->
                學校學院分別有
                <ul>
                    <li v-for="My in MyClass" v-bind:key="My">
                        學院{{My.name}} 班級數 {{My.number}}
                    </li>
                </ul>
        </div>
<!--  script : export default -->
		//在return回傳下面再定義一個陣列,我們等下用回圈來遍歷
            MyClass:[
                {"name":"資訊工程學院","number":8},
                {"name":"機電工程學院","number":6},
                {"name":"經濟管理學院","number":7}
            ]

Html支持

如果希望能夠決議HTML，必須使用v-html指令，v-html是任意HTML標簽的屬性，v-html的取值可以是Model中定義的欄位，

<!--  template  -->
<span v-html="MyJava"></span>
<!--  script data() return~   -->
MyJava:"我愛<b>Java</b>編程"

組件

組件：如果專案中多次用到類似效果，就可以把這個效果進行自定義組件，新建專案后默認存在HelloWorld.vue就是一個組件，組件檔案必須匯入才能使用，其中Helloworld為自定義名稱，通過這個名稱就可以呼叫對應組件，如果import時直接寫組件名（大小寫相同）IDEA會提升生成組件的路徑，所以一般習慣上都是把名稱定義為組件檔案名，components: 組件檔案只import是不能被使用的，必須在components中注冊組件，注冊后在中就可以通過組件名直接參考組件了，在中組件以標簽形式存在，標簽名為組件名，其中msg是在Helloworld中定義的props引數，表示需要傳遞給組件的資料，

在src下面的components目錄新建一個檔案,名字隨便取

<template>
    <div>
        <div>這是一個組件</div>
        <!--  獲取組件傳遞的引數名稱和型別  -->
        <div>{{MyLove}}</div>
    </div>
</template>

<script>
    export default {
        //我的組件名
        name: "MyComponents",
        //props:定義組件傳遞的引數名稱和型別
        props:{
            MyLove:String
        }
    }
</script>

<style scoped>

</style>

現在回到剛剛那個地方

<template>
	<div id="app">
		<div>
        	  <MyComponents MyLove="Java"/>
    	  </div>
	</div>
</template>
<script>
 //匯入,不匯入會報錯
    import MyComponents from "@/components/MyComponents";
    // export是一個資料物件,我們可以寫多個屬性或者函式
    export default {
        components:{
            MyComponents
        },
 </script>

完整原始碼參考

<template>
  <div id="app">
        <div>
            我是{{name}},我的師傅是{{master}},我要討伐{{king}}
            <br/>
            <span v-html="MyJava"></span>
        </div>
        <div>
            我是{{person.name}} 今年 {{person.age}} 歲

            <!--  單擊事件,直接寫動作,然后用 v-on: 系結  -->
            <input type="button" v-on:click="person.age = person.age + 1" value="年齡 + 1"/>
            <!--  也可以在下面定義一個函式(也可以叫方法)拿來呼叫,系結的話也可以用@來作為v-on的簡寫   -->
            <input type="button" @click="AddAge" value="年齡-1"/>
            <!--  if判斷  -->
            <span v-if="person.age<18">未成年</span>
            <span v-else-if="person.age >= 18 && person.age < 35">青年</span>
            <span v-else-if="person.age >= 35 && person.age < 50">壯年</span>
            <span v-else-if="person.age >= 50 && person.age < 60">中年</span>
            <span v-else>老年</span>
        </div>
        <div>
            <!--
              v-bind:key 系結一個變數,相當于定義一個臨時變數
              v-for="變數 in 集合" 變數是使用某已有變數,不能定義新變數，
             -->
                學校學院分別有
                <ul>
                    <li v-for="My in MyClass" v-bind:key="My">
                        學院{{My.name}} 班級數 {{My.number}}
                    </li>
                </ul>
        </div>

      <div>
          <MyComponents MyLove="Java"/>
      </div>

  </div>
</template>

<script>
    //匯入,不匯入會報錯
    import MyComponents from "@/components/MyComponents";
    // export是一個資料物件,我們可以寫多個屬性或者函式
    export default {
        components:{
            MyComponents
        },
        data(){
            return{
                name:"姜子牙",
                master:"元始天尊",
                king:"紂王",
                person:{
                    name:"張桂芳",
                    age : 16
                },
                //在return回傳下面再定義一個陣列,我們等下用回圈來遍歷
                MyClass:[
                    {"name":"資訊工程學院","number":8},
                    {"name":"機電工程學院","number":6},
                    {"name":"經濟管理學院","number":7}
                ],
                MyJava:"我愛<b>Java</b>編程"
            }
        },
        methods:{
            //定義當前組件中可以使用的所有函式
            AddAge:function () {
                this.person.age = this.person.age - 1;
            }
        }
    }
</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>

組件型別

當傳遞數值型別時，必須使用v-bind指令進行設定，這時引數表示一個運算式而不是一個字串，v-bind:age="12" ，如果直接使用age=12進行傳參效果依然可以實作，但是會在瀏覽器出現錯誤，提示要一個12的引數值，但是發現傳遞的是”12”

Vue Element

Vue Element 就是Vue的擴展插件，網址，寫代碼的時候可以點進官網對著檔案進行學習和修改

修改main.js就可以引入eleme element

頭上有@注釋的就是標識引入的那三句話

import Vue from 'vue'
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
import ElementUI from 'element-ui';
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'

Vue.config.productionTip = false
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Vue.use(ElementUI);

new Vue({
  render: h => h(App),
}).$mount('#app')

添加標簽

在App.vue中添加Eleme官網中組件內容，就比如說我先弄個按鈕

<el-button type="primary">這是一個el的按鈕</el-button>

Elment Form

撰寫好服務器端接收代碼

@Controller
public class MyController {
    @RequestMapping("/hello")
    @ResponseBody
    public String MyHello(String MyData){
        System.out.println("后臺接收前臺的資料: " + MyData);
        return MyData;
    }
}

前端代碼

<template>
    <div>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="資料">
                <el-input v-model="form.MyData"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">傳遞資料</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    MyData:"i love java"
                }
            }
        },
        methods: {
            onSubmit() {
                this.$.post("/hello",this.$.stringify({
                    MyData:this.form.MyData
                }))
            }
        }
    }
</script>

Element Table

隨便建個物體類

public class User {
    private String name;
    private Integer age;
}//寫get set或者使用注解，這里就不寫在文章里面了

Controller

@Controller
public class MyController {
    @RequestMapping("/show")
    public List<User> show(){
        List<User> list = new ArrayList<>();
        list.add(new User("張子明",19));
        list.add(new User("劉小剛",23));
        return list;
    }
}

前端

<template>
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="name"
                label="姓名"
                width="150">
        </el-table-column>
        <el-table-column
                prop="age"
                label="年齡"
                width="120">
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        data() {
            return {
                tableData: []
            }
        },
        mounted() {
            this.$.get("/show")
                .then(res => {
                    this.tableData = res.data;
                })
        }
    }
</script>