vue初接触(js直接導入型)
18295 ワード
参考ネット上の例(uiはbootstrap)
2つの主要jsファイル
でルートノードid=「app」( )を する
/*Vueおよびマウントルートインスタンスの */ domを巡回して格納する(各層のDOM要素を配列に存在させる)
韓国の赤い果物の番号を変えます
JavaScript html
Android+Jquery Mobile学習シリーズ(9)-まとめとコード共有
砂糖
JQuery Mobile
impalaリファレンス
dayutianfei
impala
JAVA静的変数と非静的変数の初期化順序の新しい解
周凡楊
java 静的 非静的 じゅんじょ
iframeを飛び出して外層ページに戻る
g21121
iframe
JAVAマルチスレッド傍受JMS、MQキュー
510888780
JAvaマルチスレッド
最初のSpringMvcの例
布衣凌宇
spring mvc
私のspring学習ノート15-容器拡張点のPropertyOverrideConfigurer
aijuans
Spring3
アルファベットで分類:
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その他
トップページ -
私たちについて -
構内検索 -
Sitemap -
権利侵害苦情
著作権すべてのIT知識ベースCopyRight© 2000-2050 IT知識ベースIT 610.com , All Rights Reserved.
京ICP備09083238号
2つの主要jsファイル
でルートノードid=「app」( )を する
/*Vueおよびマウントルートインスタンスの */
<div>
<!-- -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1882767818,2900717669&fm=26&gp=0.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<!--***********-->
<!--v-for='y in pic' -->
<!--***********-->
<div class="item" v-for='y in pic'>
<img v-bind:src='y.picUrl' alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- -->
<div id="jiugongge">
<!--***********-->
<!--v-for='y in pic'
v-bind:src
-->
<!--***********-->
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" v-for='z in icon'>
<img v-bind:src="z.iurl" />
<div>{{z.name}}</div>
</div>
</div>
<!-- -->
<div v-for='x in info'>
<router-link :to='x.toUrl'>
<!-- <a v-bind:href='x.toUrl'> -->
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 production">
<div class="image"><img v-bind:src='x.imgsrc' /></div>
<div class="content">{{x.info}}</div>
</div>
<!-- </a> -->
</router-link>
</div>
<div> </div>
<div> </div>
</div>
<div>
data ：{{ infomessage }}
<p> ：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<p> ：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span> : {{ checkedNames }}</span>
<br>
<p>input ：</p>
<input v-model="message" placeholder=" ……">
<p> : {{ message }}</p>
<br>
<br>
<p>textarea ：</p>
<p style="white-space: pre">{{ message2 }}</p>
<textarea v-model="message2" placeholder=" ……"></textarea>
<br>
<br>
<input type="radio" id="p1" value=" 1" v-model="picked">
<label for="p1"> 1</label>
<br>
<input type="radio" id="p2" value=" 2" v-model="picked">
<label for="p2"> 2</label>
<br>
<span> : {{ picked }}</span>
<br>
<br>
<select v-model="selected" name="fruit">
<option value=""> </option>
<option value="php">php</option>
<option value="vue">vue</option>
</select>
<br>
<span> : {{ selected }}</span>
<br>
<br>
<br>
<input type="button" @click="get()" value=" (Get)">
<div id='ajax' style="bottom:20px">
<div v-for='x in info_test'>
<div class="content">{{x}}</div>
</div>
</div>
</div>
<div>
<h3> {{}}</h3>
<p>{{ message }}</p>
<br>
<h3>v-html="xxxx"</h3>
<div v-html="message_1"></div>
<br>
<label for="r1">v-bind</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:aaaa
</div>
<br>
</div>
<div>
</div>
<div>
{{ message }}
</div>
/* */
const home = {
template: '#home',
/*
props:{
info:Array,
pic:Array,
icon:Array
},
*/
data() {
return {
info:[
{imgsrc:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1882767818,2900717669&fm=26&gp=0.jpg',info:' ',nav:' / / ',toUrl:'/detail'},
{imgsrc:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1882767818,2900717669&fm=26&gp=0.jpg',info:' ',nav:' / / ',toUrl:'http://www.baidu.com'},
{imgsrc:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1882767818,2900717669&fm=26&gp=0.jpg',info:' ',nav:' / / ',toUrl:'http://www.baidu.com'},
],
pic:[
{picUrl:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1882767818,2900717669&fm=26&gp=0.jpg'},
{picUrl:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1882767818,2900717669&fm=26&gp=0.jpg'}
],
icon:[
{iurl:'img/5.png',name:' '},
{iurl:'img/6.png',name:' '},
{iurl:'img/7.png',name:' '},
{iurl:'img/8.png',name:' '},
],
message: 'ceshishihihih'
};
},
}
const info = {
template: '#info',
data() {
return {
checked : false,
checkedNames: [],
infomessage:'222aasda',
message:' input ',
message2:' ',
picked : ' ',
selected: '',
info_test:Array
};
},
methods: {
get:function(){
// get
this.$http.get('test.php').then(function(res){
console.log(res.body);
$('#ajax').html(res.body);
info_test = res.body;
},function(){
console.log(' ');
});
}
}
}
const goumai = {
template: '#goumai',
data() {
return {
message : ' ',
message_1 : '<strong style="color:red">v-html</strong>',
use: false
};
},
}
const wode = {
template:'#wode'
}
const detail = {
template:'#detail',
props:{
message:String
}
}
/* */
const myroutes = [{
path: '/home',
component: home
}, {
path: '/info',
component: info
}, {
path: '/goumai',
component: goumai
}, {
path: '/wode',
component: wode
}, {
path: '/detail',
component: detail
}
]
/* VueRouter ， 'routes' */
const myr = new VueRouter({
routes: myroutes
})
/* Vue */
const app = new Vue({
el:'#app',
router: myr,
components: {info},
data:{
},
methods: {
show: function(num) {
if(num == 0) {
myr.push('home')
} else if(num == 1) {
myr.push('info')
} else if(num == 2) {
myr.push('goumai')
}else{
myr.push('wode')
}
}
}
})</code></pre>
<p> </p>
</div>
</div>
</div>
</div>
</div>
<!--PC WAP -->
<div id="SOHUCS" sid="1289137799567581184"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js">
韓国の赤い果物の番号を変えます
JavaScript html
砂糖
JQuery Mobile
dayutianfei
impala
周凡楊
java 静的 非静的 じゅんじょ
g21121
iframe
510888780
JAvaマルチスレッド
布衣凌宇
spring mvc
aijuans
Spring3
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その他
トップページ -
私たちについて -
構内検索 -
Sitemap -
権利侵害苦情
著作権すべてのIT知識ベースCopyRight© 2000-2050 IT知識ベースIT 610.com , All Rights Reserved.
京ICP備09083238号