美文网首页
vue快速上手

vue快速上手

作者: labi3285 | 来源:发表于2018-11-04 21:39 被阅读15次

    vue是一个基于响应式编程思想、模块化设计实现的js框架，可以大大简化开发，是前端开发的首选框架。

    1、基础语法

    下面这个demo演示了vue的基本使用：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Demo</title>
<!-- 这个是国内的vue cdn库 -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>

  <div id="app">

    <!-- 插值 -->
    <div>{{ test_message }}</div>
    <!-- 插值html模板 -->
    <div v-html="test_vhtml"></div>

    <!-- 遍历 -->
    <div>
      <li v-for="user in test_users">
        {{ user.name }}, {{ user.age }} years old.
      </li>
      <li style="list-style: none" v-for="(user, i) in test_users" :key="i">
          {{ i }}: {{ user.name }}, {{ user.age }} years old.
      </li>
    </div>

    <!-- 插值方法 -->
    <div>{{ test_func() }}</div>

    <!-- 计算 -->
    <div>1 + 2 = {{ 1 + 2 }}</div>
    <div>{{ test_bool ? "YES" : "NO" }}</div>

    <!-- 条件分支 -->
    <div v-if="test_bool">see me if test_bool is true</div>
    <div v-else>see me if test_bool is false</div>

    <!-- 绑定值 -->
    <div v-bind:id="'xxx' + test_bind_id">a h1 with id xxx-{{ test_bind_id }}</div>
    <a v-bind:href="test_url">a baidu link</a><br/>
    <!-- 简写形式 -->
    <div :id="'xxx' + test_bind_id">a h1 with id xxx-{{ test_bind_id }}</div>
    <a :href="test_url">a baidu link</a><br/>

    <!-- 绑定事件 -->
    <button v-on:click="test_click">a button</button><br/>
    <button v-on:click="test_click_count += 1">a button</button><span>{{ test_click_count }}</span><br/>
    <!-- 事件细节 -->
    <button v-on:click.once="test_click">a once click button</button><br/>
    <input v-on:keyup.enter="test_summit" placeholder="tap enter to summit"><br/>
    <!-- 简写形式 -->
    <button @click="test_click">a button</button><br/>

    <!-- 双向绑定 -->
    <input v-model="test_input_value"><span>{{ test_input_value }}</span><br/>
    <!-- 多选绑定 -->
    <input type="checkbox" id="check_a" value="a" v-model="test_options"><label for="check_a">A</label>
    <input type="checkbox" id="check_b" value="b" v-model="test_options"><label for="check_b">B</label>
    <input type="checkbox" id="check_c" value="c" v-model="test_options"><label for="check_c">C</label>
    <label>{{ test_options }}</label><br />
    <!-- 列表绑定 -->
    <select v-model="test_select">
      <option value="">choose</option>
      <option value="a">A</option>
      <option value="b">B</option>
    </select>
    <label>{{ test_select }}</label><br/>


    <!-- 绑定样式 -->
    <div v-bind:style="{ color: test_color }">test style</div>
    <div v-bind:class="{ test_class_active: test_bool }">test class</div>

    <!-- 过滤器 -->
    <div v-bind:id="'id-' + test_bool | test_filter_bool">a div with id id-{{ test_bool | test_filter_bool }}</div>
    <div>{{ test_message }} -> {{ test_message | test_filter_upcase }}</div>

    <!-- 监听器 -->
    <input v-model="test_money_dollar"><span>{{ test_money_yuan }}¥</span><br />

  </div>

  <style>
    .test_class_active {
      color: green;
    }
    .test_class_disable {
      color: gray;
    }
  </style>
  
  <script>
    new Vue({
      el: '#app',
      data: {
        test_message: "a test message",
        test_color: "#ff0000",
        test_vhtml: "<h5>a h5</h5>",
        test_bool: true,
        test_click_count: 0,
        test_money_yuan: 0,
        test_money_dollar: 0,
        test_users: [
          { name: 'Tom', age: 12 },
          { name: 'Helen', age: 11 },
          { name: 'Jack', age: 13 }
        ],
        test_options: [],
        test_select: "",
        test_bind_id: 1,
        test_url: "https://www.baidu.com",
        test_input_value: "the input text"
      },
      filters: {
        test_filter_upcase: function (value) {
          if (!value) return ''
          value = value.toString()
          return value.toUpperCase()
        },
        test_filter_bool: function (value) {
          if (value.booleanValue) {
            return "true"
          } else {
            return "false"
          }
        }
      },
      watch: {
        test_money_dollar: function (value) {
          this.test_money_yuan = value * 6
        }
      },
      methods: {
        test_func: function () {
          return "test_func(): " + this.test_message;
        },
        test_click: function () {
          alert("test_click()")
        },
        test_summit: function () {
          alert("test_summit()")
        }
      }
    })
  </script>
</body>
</html>

    2、模块化

    a、注册组件

    <div id="app">
  <!-- 引用 -->
  <test_component_01></test_component_01>
  <test_component_02></test_component_02>
</div>
<script>
  // 注册全局组件
  Vue.component('test_component_01', {
    template: '<div>test component 01</div>'
  })
  // app实例
  new Vue({
    el: '#app',
    // 注册局部组件
    components: {
      'test_component_02': {
        template: '<div>test component 02</div>'
      }
    }
  })
</script>

    b、模块间传值(父 --> 子)，变量绑定及声明

    <div id="app">
  <input v-model="parent_text"><br/>
  <!-- ② 绑定变量 -->
  <child v-bind:text_from_parent="parent_text"></child>    
</div>
<script>
  Vue.component('child', {
    // ① 声明变量
    props: ['text_from_parent'],
    template: "<span>{{ text_from_parent }}</span>"
  })
  new Vue({
    el: '#app',
    data: {
      parent_text: "parent text"
    }
  })
</script>

    props后面的参数也可以以map的形式提供，以实现参数限定，例如：

    props: { 
  varA: Number,
  varB: [String, Number],
  varC: {
    type: Number, 
    required: true,
    default: 1
  },
  varD: {
    validator: function (value) {
      return value > 10
    }
  }
}

    c、模块间传值(子 --> 父)，事件监听

    <div id="app">
    <div>{{ count }}</div>
    <!-- ② 注册事件监听 -->
    <child v-on:update="childRespondUpdate"></child>
</div>
  
<script>
Vue.component('child', {
  template: '<button v-on:click="onClick">click me to change parent</button>',
  data: function () {
    return {
      count: 0
    }
  },
  methods: {
    onClick: function () {
      this.count += 1
      // ① 在子控件更新的方法中，触发事件
      this.$emit('update', this.count)
    }
  },
})
new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    // ③ 执行更新
    childRespondUpdate: function (value) {
      this.count = value
    }
  }
})
</script>

    3、路由（router）

    路由是vue的一个页面切换组件，基本使用如下：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Router Demo</title>
<!-- 这个是国内的vue cdn库 -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- vue router库 -->
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
</head>

<body>
  <div id="app">
      <!-- 普通链接 -->
      <router-link to="/a">a-path</router-link>
      <router-link to="/b">b-path</router-link>
      <br/>

      <!-- 通过名字访问 -->
      <router-link v-bind:to="{ name:'a' }">a-name</router-link>
      <router-link v-bind:to="{ name:'b' }">b-name</router-link>
      <br/>

      <!-- 带参数 -->
      <router-link v-bind:to="{ path:'/a', query: { param: 'value' } }">a-param</router-link>
      <router-link v-bind:to="{ path:'/b', query: { param: 'value' } }">b-param</router-link>
      <br/>

      <!-- 指定tag类型 -->
      <router-link to="/a" tag="button">a-tag</router-link>
      <router-link to="/b" tag="button">b-tag</router-link>
      <br/>

      <!-- router区域 -->
      <router-view></router-view>
  </div>
  <script>
    // 创建router
    const router = new VueRouter({
      routes: [
        { path: '/a', name: 'a', component: { template: '<div>A</div>' } },
        { path: '/b', name: 'b', component: { template: '<div>B</div>' } },
        { path: '/a/b', name: 'c', component: { template: '<div>C</div>' } }
      ]
    })
    // 通过router初始化
    const app = new Vue({
      router: router
    })
    // 手动挂载
    .$mount('#app')
  </script>
</body>
</html>

    相关文章

      网友评论

          本文标题：vue快速上手

          本文链接：https://www.haomeiwen.com/subject/cvbdxqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|vue快速上手|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！