JUC之讀寫鎖：ReadWriteLock
阿新 • • 發佈：2020-12-30
技術標籤：vue
Vue
格式
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/ Vue-cdn
<!-- Vue cdn -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
簡單的語句
- v-if判斷語句 v-if=""
<!-- 判斷語句 -->
<div id="app">
<h1 v-if="ok">Yes</h1>
<h1 v-else="ok">No</h1>
</div>
<script>
var vm = new Vue({
el: "#app",
data:{
ok: true
}
});
</script>
<div id="app">
<h1 v-if="ok==='A'">Yes</h1>
<h1 v-else>No</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/ - v-for=""
<!--for迴圈-->
<div id="app">
<li v-for="item in itemss">
{{item.message}}
</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
itemss: [
{message: "zjh"},
{message: "zjh前端"},
{message: "zjh運維"},
{message: "zjh運維1"}
]
}
});
事件方法
方法 v-on:click=""
<div id="app">
<button v-on:click="sayHai">單擊按鈕</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
message: "你好Vue"
},
methods:{ //方法必須定義在vue的methods物件中 v-on:事件
sayHai: function () {
alert(this.message);
}
}
});
</script>
雙向繫結 v-model=""
<div id="app">
<input type="test" v-model="message"> {{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: ""
}
});
</script>
2
<div id="app">
請輸入<input type="text" v-model="message"/> {{message}}
性別：<input type="radio" name="sex" value="男" checked> 男
<input type="radio" name="sex" value="女"> 女
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "123"
}
});
</script>
3
<div id="app">
請輸入<input type="text" v-model="message"/> {{message}}
性別：<input type="radio" name="sex" value="男" v-model="zhang"> 男
<input type="radio" name="sex" value="女" v-model="zhang"> 女
<p>選擇了:{{zhang}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
zhang: ""
}
});
</script>
4
<div id="app">
下拉框：<select v-model="jun">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>選擇了:{{jun}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
zhang: "",
jun: ""
}
});
</script>
5
<div id="app">
下拉框：<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>選擇了:{{selected}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
zhang: "",
jun: "",
selected: ""
}
});
</script>
6
<div id="app">
<!-- 請輸入<input type="text" v-model="message"/> {{message}}-->
<!-- 性別：<input type="radio" name="sex" value="男" v-model="zhang"> 男-->
<!-- <input type="radio" name="sex" value="女" v-model="zhang"> 女-->
<!-- <p>選擇了:{{zhang}}</p>-->
下拉框：<select v-model="selected">
<option value="" disabled>--請選擇--</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>選擇了:{{selected}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
zhang: "",
jun: "",
selected: ""
}
});
</script>
元件
//定義一個元件
Vue.component("zhangjunhang",{
template: '<li>Hello</li>'
});
測試
<div id="app">
<zhangjunhang></zhangjunhang>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
//定義一個元件
Vue.component("zhangjunhang",{
template: '<li>Hello</li>'
});
var vm = new Vue({
el: "#app"
});
</script>
迴圈測試
<div id="app">
<zhangjunhang v-for="item in items" v-bind:zhang="item"></zhangjunhang>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
//定義一個元件
Vue.component("zhangjunhang",{
// template: '<li>Hello</li>'
props: ['zhang'],
template: '<li>{{zhang}}</li>'
});
var vm = new Vue({
el: "#app",
data:{
items: ["java","Linux","前端"]
}
});
</script>
slot插槽
<div id="app">
<!-- <p>標題</p>-->
<!-- <ul>-->
<!--<!– <li v-for="item in items">{{item}}</li>–>-->
<!-- <zhang v-for="item in items" v-bind:item="item"></zhang>-->
<!-- </ul>-->
<zhang>
<to-title slot="to-title" v-bind:title="title"></to-title>
<to-items slot="to-items" v-for="item in items" :item="item"></to-items>
</zhang>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
// Vue.component("zhang",{
// props: ['item'],
// template: "<li>{{item}}</li>"
// })
Vue.component("zhang",{
props: [''],
template: '<div>\
<slot name="to-title"></slot>\
<ul>\
<slot name="to-items"></slot>\
</ul>\
</div>'
});
Vue.component("to-title",{
props:['title'],
template: '<h1>{{title}}</h1>'
});
Vue.component("to-items",{
props:['item'],
template: '<li>{{item}}</li>'
});
var vm = new Vue({
el: "#app",
data:{
title:"個人資訊",
items: ["java","lol","cf"]
}
});
</script>
Vue-cli執行
建立vue-cli程式
隨便到一個資料夾開啟cmd：
vue init webpack myvue
完成後 cd myvue
在執行 npm install 安裝依賴關係
啟動命令 npm run dev
結束命令 ctrl+C
-
嚴格檢查模式 'use strict' var i = "hello world" i = "hello world"
webpack打包工具的安裝
webpack的安裝
npm install webpack -g
npm install webpack-cli -g
測試安裝成功
webpack -v
webpack-cli -v
練習
建立一個專案
- webpack-study資料夾
- 用idea open開啟
暴露一個方法exports
hello.js
//暴露一個方法
exports.sayHi = function () {
document.write("<h1>zjh</h1>")
}
載入一個方法require
main.js
//載入一個方法
var hello = require("./hello");
hello.sayHi();
打包module.exports
webpack.config.js 建立到根目錄
module.exports = {
entry: './modules/main.js', //程式的主入口
output: {
filename: "./js/bundle.js" //輸出到指定的地方
}
}
最後執行webpack命令
測試html頁面
index.html
<!--前端的模組化開發-->
<script src="dist/js/bundle.js"></script>
webpack --watch熱部署
安裝vue-router 路由
npm install vue-router --save-dev
使用vue-router 路由
import VueRouter from 'vue-router'
//顯示宣告使用VueRouter
Vue.use(VueRouter);
<router-link>當成一個<a>標籤
to 當成 href
<router-link to="content"></router-link>
路由的使用步驟 router
-
安裝路由 npm install vue-router --save-dev
-
匯入路由 import VueRouter from “vue-router”;
表示使用它 路由 //顯示宣告使用VueRouter Vue.use(VueRouter); -
建立一個自己的內容頁
Content.vue -
建立一個router路由目錄 再建立一個主配置檔案 index.js
index.js 路由檔案 //1.使用Vue就匯入 import Vue from 'vue' //2.使用路由 import VueRouter from "vue-router"; //8.匯入元件 import Content from '../components/Content' //3.安裝路由 Vue.use(VueRouter); //4.配置匯出路由 //匯出一個物件 //匯出一個預設的物件 export default new VueRouter({ //5.寫一個路由陣列，可以配置多個路由 routes: [{ //6.路由路徑 path:'/content', //7.跳轉的元件 component: Content }] }); -
使用路由
1.到main.js匯入路由配置 import router from './router' //自動掃描路由配置 2.在Vue主入口裡面寫一個 router 【 import Vue from 'vue' import App from './App' import router from './router' ----------這裡的名字------- Vue.config.productionTip = false new Vue({ el: '#app', //配置路由 router, -------這裡------- components: { App }, template: '<App/>' }) 】 -
準備工作完成使用路由
<template> <div id="app"> <!-- 跳轉到Content --> <router-link to="Content">內容</router-link> <!-- 加上這個標籤顯示內容--> <router-view></router-view> </div> </template> -
最後 npm run dev 執行