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>