Vue demo

<pre> <code>目錄/文件 說明

build 項目構建(webpack)相關代碼 config 配置目錄，包括端口號等。我們初學可以使用默認的。 node_modules npm 加載的項目依賴模塊

src 這裏是我們要開發的目錄，基本上要做的事情都在這個目錄裏。裏面包含了幾個目錄及文件：

assets: 放置一些圖片，如logo等。 components: 目錄裏面放了一個組件文件，可以不用。 App.vue: 項目入口文件，我們也可以直接將組件寫這裏，而不使用 components 目錄。 main.js: 項目的核心文件。 static 靜態資源目錄，如圖片、字體等。 test 初始測試目錄，可刪除 .xxxx文件 這些是一些配置文件，包括語法配置，git配置等。 index.html 首頁入口文件，你可以添加一些 meta 信息或統計代碼啥的。 package.json 項目配置文件。 README.md 項目的說明文檔，markdown 格式</code></pre>

<pre> <code>Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report</code></pre>

main.js: 項目的核心文件

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue


<!-- 展示模板 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- 直接使用自定義組件模板 -->
    <hello></hello>

    <!-- 使用 router-link 組件來導航. -->
    <!-- 通過傳入 `to` 屬性指定鏈接. -->
    <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>

    <!-- 字符串 -->
    <router-link to="home">Home</router-link>
    <!-- 渲染結果 -->
    <a href="home">Home</a>

    <!-- 使用 v-bind 的 JS 表達式 -->
    <!--<router-link v-bind:to="'home'">Home</router-link>-->

    <!-- 不寫 v-bind 也可以，就像綁定別的屬性一樣 -->
    <!--<router-link :to="'home'">Home</router-link>-->

    <!-- 同上 -->
    <!--<router-link :to="{ path: 'home' }">Home</router-link>-->

    <!-- 命名的路由 -->
    <!--<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>-->

    <!-- 帶查詢參數，下面的結果爲 /register?plan=private -->
    <!--<router-link :to="{ path: 'register', query: { plan: 'private' }}">register</router-link>-->

    <!-- 路由出口 -->
    <!-- 路由匹配到的組件將渲染在這裏 -->
    <router-view></router-view>
  </div>
</template>


<script type="text/javascript">
// 導入組件
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</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>




<p>路由</p>

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'

// 0. 如果使用模塊化機制編程，導入 Vue 和 VueRouter，要調用 Vue.use(VueRouter)

// 1. 定義（路由）組件。
// 可以從其他文件 import 進來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Home = { template: '<div>Home</div>' }
const Register = { template: '<div>register</div>' }

Vue.use(Router)


// 2. 定義路由
// 每個路由應該映射一個組件。 其中"component" 可以是
// 通過 Vue.extend() 創建的組件構造器，
// 或者，只是一個組件配置對象。
export default new Router({
  routes: [
    // {
    //   path: '/',
    //   name: 'HelloWorld',
    //   component: HelloWorld
    // },
    {
      path: '/hello',
      name: 'Hello',
      component: Hello
    },{
      path: '/foo',
      component: Foo
    },
    {
      path: '/bar',
      component: Bar
    },
    {
      path: '/register',
      component: Register
    }
  ]
})




<p>組件</p>

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>alexa : {{alexa}}</h1>
    <h1>{{details()}}</h1>
    <!--輸出html-->
    <p v-html="message"></p>
    <!--綁定bind-->
    <p v-bind:class="{'class1':use}"></p>
    <div v-bind:id="'list-' + id">綁定id</div>
    <!-- 完整語法 -->
    <pre><a v-bind:href="url">綁定地址</a></pre>
    <!-- 縮寫語法 -->
    <a :href="url">綁定地址</a>
    <p>{{5+5}}<br></p>
    {{ ok ? 'YES' : 'NO' }}<br>
    <!--if判斷-->
    <p v-if="seen">現在你看到我了</p>
    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>

    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>

    <!--循環-->
    <ol>
      <li v-for="site in sites">
        {{ site.name }}
      </li>
    </ol>
    <ul>
      <li>--------------</li>
      <template v-for="site in sites">
        <li>{{ site.name }}</li>
        <li>--------------</li>
      </template>
    </ul>

    <ul>
      <li v-for="value in object">
        {{ value }}
      </li>
    </ul>

    <ul>
      <li v-for="(value, key) in object">
        {{ key }} : {{ value }}
      </li>
    </ul>

    <ul>
      <li v-for="(value, key, index) in object">
        {{ index }}. {{ key }} : {{ value }}
      </li>
    </ul>

    <ul>
      <li v-for="n in 3">
        {{ n }}
      </li>
    </ul>
    <a v-on:click="hide()">點我跳轉</a>
    <!--數據綁定-->
    <p>{{ message }}</p>
    <input v-model="message">
    <p>{{ bind }}</p>
    <button v-on:click="reverseMessage">反轉字符串</button>
    <!--縮寫-->
    <button @click="reverseMessage">反轉字符串</button>

    <p style = "font-size:25px;">計數器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">點我</button>

    <!--表單-->
    <p>input 元素：</p>
    <input v-model="message" placeholder="編輯我……">
    <p>消息是: {{ message }}</p>

    <p>textarea 元素：</p>
    <p style="white-space: pre">{{ message2 }}</p>
    <textarea v-model="message2" placeholder="多行文本輸入……"></textarea>

    <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>
    <select v-model="selected" name="fruit">
      <option value="">選擇一個網站</option>
      <option value="www.runoob.com">Runoob</option>
      <option value="www.google.com">Google</option>
    </select>

    <div id="output">
      選擇的網站是: {{selected}}
    </div>
    <!--表單 end-->

    <!--自定義組件-->
    <secondcomponent></secondcomponent>
    <!--父調用child的值-->
    <p>{{parentMsg}}</p>

    <button v-on:click = "show = !show">點我</button>
    <transition name = "fade">
      <p v-show = "show" v-bind:style = "styleobj">動畫實例</p>
    </transition>
  </div>
</template>


<script type="text/javascript">

import Secondcomponent from "./secondcomponent";

export default {
  components: {
    Secondcomponent
  },
  name: "hello",
    data(){
      return {
        msg: "components hello chenshuo",
        site:"test",
        url:"www.baidu.com",
        alexa:1000,
        message: '<h1>輸出html及數據綁定</h1>',
        message2: 'test消息',
        use:false,
        ok:true,
        id:1,
        seen:true,
        bind:"綁定數據",
        type:'c',
        sites: [
          { name: 'for1' },
          { name: 'for2' },
          { name: 'for3' }
        ],
        object:{
          name:"objName",
          test:"objTest"
        },
        counter:1,
        checked:true,
        checkedNames:[],
        selected: '',
        parentMsg: Secondcomponent.data().child + "parentMsg",
        show:true,
        styleobj :{
          fontSize:'30px',
          color:'red'
        }
      }
    },
    // 定義一個混入對象
    created(){
       this.hide();
    },
    methods: {
      details:function () {
        return "This methods details:"+this.url;
      },
      hide:function () {
        console.info("11111")
      },
      reverseMessage: function () {
        this.bind = this.bind.split('').reverse().join('')
      }
    },
    //使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基於它的依賴緩存，只有相關依賴發生改變時纔會重新取值。
    // 而使用 methods ，在重新渲染的時候，函數總會重新調用執行。
    computed:{

    },

}
</script>

<style scoped>

</style>




<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>



<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App chenshuo'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>


secondcomponent.vue

<template>
  <p>secondcomponent:{{child}}</p>
</template>

<script>
  export default {
    name: "secondcomponent",
    template: '<h1>自定義組件!</h1>',
    data(){
      return {
        child:"child msg"
      }
    },
    props: {
      // 基礎的類型檢查 (`null` 和 `undefined` 會通過任何類型驗證)
      propA: Number,
      // 多個可能的類型
      propB: [String, Number],
      // 必填的字符串
      propC: {
        type: String,
        // required: true
      },
      // 帶有默認值的數字
      propD: {
        type: Number,
        default: 100
      },
      // 帶有默認值的對象
      propE: {
        type: Object,
        // 對象或數組默認值必須從一個工廠函數獲取
        default: function () {
          return { message: 'hello' }
        }
      },
      // 自定義驗證函數
      propF: {
        validator: function (value) {
          // 這個值必須匹配下列字符串中的一個
          return ['success', 'warning', 'danger'].indexOf(value) !== -1
        }
      }
    }
  }
</script>


<style scoped>
</style>