第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為什么不用#號？

1. 直接寫<style>

2.在public中新建css文件，在源文件中導(dǎo)入@import “../../public/**.css"

3.在index.html中修改

npm run serve是vue-cli3的執(zhí)行

對于2要使用npm run dev

type pa*

安裝依賴：npm i? /cnpm i

初始化：npm init -f/cnpm init -f

安裝組件，并查看安裝后的內(nèi)容

npm uni vue-cli -g

npm i -g? @vue/cli

cnpm i -g? @vue/cli

vue ui 圖形界面

圖形管理器

vue create? vue-test3

vue兄弟組件間傳值

msg.js
import?Vue?from?'vue'
export?default?new?Vue

AA.vue
import?Msg?from?'./msg'
Msg.$emit('eventBus'?,?'1')

BB.vue
import?Msg?from?'./msg'
Msg.$on('eventBus',?function(data){console.log(data)})

vue以圖形界面的方式創(chuàng)建vue項(xiàng)目

vue?ui

cmd中查看文件內(nèi)容命令

type?index.js

安裝cnpm命令

npm?i?-g?cnpm??--registry=https://registry.npm.taobao.org

[
??{
????"goodName":?"xiaoxin1",
????"img":"img/jsj/jsj1.png"
??},
??{
????"goodName":?"xiaoxin2",
????"img":"img/jsj/jsj2.png"
??},
??{
????"goodName":?"xiaoxin3",
????"img":"img/jsj/jsj3.png"
??},
??{
????"goodName":?"xiaoxin4",
????"img":"img/jsj/jsj4.png"
??},
??{
????"goodName":?"xiaoxin5",
????"img":"img/jsj/jsj5.png"
??},
??{
????"goodName":?"xiaoxin6",
????"img":"img/jsj/jsj6.png"
??},
??{
????"goodName":?"xiaoxin7",
????"img":"img/jsj/jsj7.png"
??},
??{
????"goodName":?"xiaoxin8",
????"img":"img/jsj/jsj8.png"
??}
]

[
??{
????"goodName":?"sxiaoxin1",
????"img":"img/sj/sj1.png"
??},
??{
????"goodName":?"sxiaoxin2",
????"img":"img/sj/sj2.png"
??},
??{
????"goodName":?"sxiaoxin3",
????"img":"img/sj/sj3.png"
??},
??{
????"goodName":?"sxiaoxin4",
????"img":"img/sj/sj4.png"
??},
??{
????"goodName":?"sxiaoxin5",
????"img":"img/sj/sj5.png"
??},
??{
????"goodName":?"sxiaoxin6",
????"img":"img/sj/sj6.png"
??},
??{
????"goodName":?"sxiaoxin7",
????"img":"img/sj/sj7.png"
??},
??{
????"goodName":?"sxiaoxin8",
????"img":"img/sj/sj8.png"
??}
]

<template>
????<div?name="show">
????????============
????????<ul?class="goodList">
????????????<li?v-for="good?in?list">
????????????????<img?v-bind:src="good.img">
????????????????<p>{{good.goodName}}</p>
????????????</li>
????????</ul>
????</div>
</template>
<style?type="text/css">
????.goodList?li{
???????width:?200px;
????????height:?200px;
????????list-style:?none;
????????float:?left;
????????font-size:?9px;
????????color:?red;
????????margin-bottom:?30px;
????}
????.goodList?img{
????????width:?180px;
????????height:?180px;
????}
</style>
<script?type="text/javascript">
????export?default?{
????????name:"show",
????????data(){
????????????var?_this?=?this;
????????????var?url?=?"";
????????????console.log(_this.goodId);
????????????if(_this.goodId==1){
????????????????url="jsj.json";
????????????}else?if(_this.goodId==2){
????????????????url="sj.json";
????????????}else{
????????????????url="jsj.json";
????????????}
????????????this.$http.get(url).then(function?(res)?{
????????????????_this.list?=?res.data
????????????????console.log(_this.list);
????????????})
????????????return{
????????????????list:[]
????????????}
????????},
????????props:{//父子組件的傳值
????????????goodId:?Number
????????},
????????watch:{//監(jiān)聽父子組件傳值的過程
????????????goodId(){
????????????????var?obj?=?this;
????????????????var??url?=?"";
????????????????if(obj.goodId==1){
????????????????????url="jsj.json";
????????????????}else?if(obj.goodId==2){
????????????????????url="sj.json";
????????????????}else{
????????????????????url="jsj.json";
????????????????}
????????????????this.$http.get(url).then(function?(res)?{
????????????????????obj.list?=?res.data
????????????????????console.log(obj.list);
????????????????})
????????????????return{
????????????????????list:[]
????????????????}
????????????}
????????}
????}
</script>

<template>
????<div>
????????<div?class="title">
????????????熱門推薦
????????</div>
????????<div?class="menu">
????????????<ul>
????????????????<li?@click="menu1">筆記本電腦?</li>
????????????????<li?@click="menu2">手機(jī)</li>
????????????????<li?@click="menu3">筆記本電腦?</li>
????????????????<li>手機(jī)</li>
????????????????<li>筆記本電腦?</li>
????????????????<li>手機(jī)</li>
????????????????<li>筆記本電腦?</li>
????????????????<li>手機(jī)</li>
????????????????<li>筆記本電腦?</li>
????????????????<li>手機(jī)</li>
????????????????<li>手機(jī)</li>
????????????</ul>
????????</div>
????</div>
</template>
<style>
????.title{
????????color:?red;
????????width:?100px;
????}
????.menu?li{
????????list-style:?none;
????????height:?50px;
????????margin-bottom:?2px;
????????line-height:?50px;
????????background-color:?#fcfcfc;
????????cursor:?pointer;
????}

</style>
<script?type="text/javascript">
????import?Msg?from?'./msg.js'
????export?default?{
????????methods:{
????????????menu1:function?()?{
????????????????Msg.$emit("val","1")
????????????},
????????????menu2:function?()?{
????????????????Msg.$emit("val","2")
????????????},
????????????menu3:function?()?{
????????????????Msg.$emit("val","3")
????????????}
????????}
????}
</script>

import?Vue?from?'vue'
export?default?new?Vue

<template>
????<div>
????????<div?v-if="kk==1">
????????????<GoodList?:goodId=1></GoodList>
????????</div>
????????<div?v-else-if="kk==2">
????????????<GoodList?:goodId="2"></GoodList>
????????</div>
????????<div?v-else-if="kk==3">
???????????33333333333
????????</div>
????????<div?v-else>
????????????<GoodList?:goodId="0"></GoodList>
????????</div>
????</div>
</template>
<script>
????import?Msg?from?'./msg.js'
????import?GoodList?from?'./goodsList.vue'
????export?default?{
????????data(){
????????????return{
????????????????kk:0
????????????}
????????},
????????mounted:function?()?{
????????????var?_this?=?this
????????????Msg.$on('val',function?(m)?{
????????????????_this.kk?=?m;
????????????})
????????},
????????components:{
????????????GoodList
????????}
????}
</script>

import?Vue?from?'vue'
import?VueRouter?from?'vue-router'
import?Home?from?'../views/Home.vue'
import?First?from?'../views/First.vue'

Vue.use(VueRouter)

??const?routes?=?[
??{
????path:?'/',
????component:?First
??},
??{
????path:?'/about',
????name:?'About',
????//?route?level?code-splitting
????//?this?generates?a?separate?chunk?(about.[hash].js)?for?this?route
????//?which?is?lazy-loaded?when?the?route?is?visited.
????component:?()?=>?import(/*?webpackChunkName:?"about"?*/?'../views/About.vue')
??}
]

const?router?=?new?VueRouter({
??mode:?'history',
??base:?process.env.BASE_URL,
??routes
})

export?default?router

<template>
????<div?class="main">
????????<div?class="left">
????????????<Left></Left>
????????</div>
????????<div?class="right"?>
????????????<div?class="top">
????????????????<img?src="img/title.png">
????????????</div>
????????????<div?class="buttom">
????????????????<Right></Right>
????????????</div>
????????</div>
????</div>
</template>
<style>
????*{
????????padding:?0;
????????margin:?0;
????}
????.left{
????????width:?100px;
????????float:?left;
????????margin-right:?10px;
????}
????.right{
????????width:?1000px;
????????float:?left;
????????margin-left:?10px;
????}
????.main{
????????width:?1200px;
????????margin:?10px?auto;
????}
????.top?img{
????????height:?200px;
????????width:1000px;
????}
????.right,.left{
????????background-color:?#f5f5f5;
????????height:?500px;
????}
</style>
<script?type="text/javascript">
????import?Left?from?"../components/Left.vue"
????import?Right?from?"../components/Right.vue"
????export?default?{
????????components:{
????????????Left,
????????????Right
????????}
????}
</script>

import?Vue?from?'vue'
import?Router?from?'vue-router'
import?HelloWorld?from?'@/components/HelloWorld'
import?First?from?'@/components/first'
import?A?from?'@/components/A'
import?B?from?'@/components/B'
import?A1?from?'@/components/A1'

Vue.use(Router)

export?default?new?Router({
??mode:'history',//使得訪問地址欄中沒有#
??routes:?[
????{
??????path:?'/',
??????name:?'First',
??????component:?First,
??????children:[
????????{
??????????path:?'/a',
??????????name:?'A',
??????????component:?A
????????},
????????{
??????????path:?'/b',
??????????name:?'B',
??????????component:?B
????????},
????????{
??????????path:?'/a/a1',
??????????name:?'A1',
??????????component:?A1
????????}
??????]
????},

??]
})

<template>
??<div>
????first.vue
????<router-link?to="/a">轉(zhuǎn)向A頁面</router-link>
????<router-link?to="/b">轉(zhuǎn)向B頁面</router-link>

????<router-view></router-view><!--????子路由掛載-->
??</div>
</template>

<script>

</script>

<style?>

</style>

<template>
??<div>
????<p>我是A……</p>
????<p><router-link?to="/a/a1">轉(zhuǎn)向A1</router-link></p>
????<p><router-link?to="/">返回</router-link></p>
??</div>
</template>

<script>

</script>

<style?>

</style>

<template>
??<div>
????<p>我是B……</p>
????<p><router-link?to="/">返回</router-link></p>
??</div>
</template>

<script>

</script>

<style?>

</style>

<template>
??<div>
????<p>我是A1……</p>
????<p><router-link?to="/">返回</router-link></p>
??</div>
</template>

<script>

</script>

<style?>

</style>

<!--APP.vue是主組件，路由（index.js）里的每個內(nèi)容理解為子組件-->
<template>
??<div?id="app">
????<img?src="./assets/logo.png">
????<router-view/><!--????這里掛載index.js這個路由-->
??</div>
</template>

<script>
export?default?{
??name:?'App'
}
</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>