【vue 2.0学習】雑記(CSS中央方式、templateの3種類の書き方、コンポーネント基礎)

10911 ワード
先端学習
CSSにおけるベースの中央揃え
ブロック内のテキストの水平方向中央text-alignは、そのブロック要素を使用する文字またはピクチャに作用し、水平方向に中央になるようにブロックレベル要素に用いられる.
[ブロック要素](Block Element)自体が水平方向に中央に配置されています(幅が設定されているブロックを決定します)
一般的には、margin:0 auto;を設定できます.これにより、このブロック要素は親要素の中で中央に、上下左右が中央になります.水平方向が中央であればmargin-left:auto; margin-right:auto;に設定します
[ブロック要素](Block Element)自体が水平方向に中央に配置されています(幅が不確定なブロック)
  • ブロック要素のサブ要素もブロック要素であれば、サブ要素に対してmargin autoのような方法を使用すればよいし、displayでinlineに設定してtext-alignを使用することもできる.
  • ブロックレベル要素のサブ要素が行内要素であれば、最初に紹介したtext-alignでも解決できます.

    • vertical-align行内要素の垂直中央に使用
  • vertical-alignこの属性は、1.インライン要素(およびインライン要素に変換するブロック要素)2.displayはtable-cellの要素3に設定.このような元素
    • 注:vertical-alignプロパティをアクティブにするには、ブロックレベル要素のdisplay値をtable-cellに設定します.
    ブロックレベル要素のテキストピクチャを垂直に中央に配置
    heightの高さをline-heightの高さと同じに設定します!
    <div style="line-height:500px;height:500;">div>

    ブロックレベル要素自体の垂直方向中央
    ブロックレベル要素自体が親要素の垂直方向に中央になるように設定し、ブロックレベル要素の水平方向に中央になる方法(前述)を参照して、外距離を設定します.水平中心を設定したくない場合は、上下外縁をautoに設定すればいいです.vertical-align:middle;の方式を採用してもよいが、displayをtable-cellに設定することが前提である.
    コンポーネントベース
    今日やっと自分が前回のコンポーネントの基础の部分が全然読んでいないことに気づいて、私は本当に瓜皮で、私はどのようにドキュメントを全部読んでしまったと言って、しかしやはり分からないで、ハハハ、もとは本当の原因はすべてここにあります...もうひと言突っ込むと、このJSの括弧は私をいらいらさせます==
    vueにおけるtemplateの3つの書き方
    書き方1
    
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue2.0   title>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
div>
body>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
},
template:`

    "color:red"
    >     </h1>
`
})
    script>
html>

    「(反転記号)で実現され、比較的少ない内容量を書くのに適しています
    書き方2
    
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue2.0   title>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
div>
<template id="template">
<h1>          h1>
template>
body>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
},
template:"#template"
})
script>
html>

    最も一般的な書き方
    templateラベルを用いてコンテンツの充填を実現し,最終的にidまたは他のセレクタによってtemplate上にマウントする
    vue-cliを使用する場合は、次のコードに示すようにテンプレートを使用します.
    <template>

template>
<script>
/*    js */
script>
<style scoped>
/*      
  :scoped    style           html   
*/
style>

    方法3
    
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue2.0   title>
<script src="js/vue.js">script>
head>
<body>
<div id="app">
div>
body>
<script type="x-template" id="template">

              </h2>

    script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
},
template:"#template"
})
script>
html>

    この書き方はscriptのtypeを変更します:type="x-template"に変更してidをあげて、最終的にtemplateにマウントすればいいです
    コンテンツが多いテンプレートや共通のテンプレートで使用
    normalize.css(cssスタイル初期化)Vueでの簡単な使用
    iview Menuを使用するとピットに遭遇し、クリックイベントを追加するのは無効で、最後に@click.nativeは解決して、それからページのリフレッシュの時、データをsessionStoreの中に存在して、それからリフレッシュしてロードを終えて、私のプラスはmountedの中で置いて、無効です