老雷PHP全栈开发教程之Vue基础教程

老雷PHP全栈开发

发布于 2020-07-02 12:15:44

6110

发布于 2020-07-02 12:15:44

文章被收录于专栏：老雷PHP全栈开发

Vue是一套用于构建用户界面的渐进式框架,Vue 的核心库只关注视图层，Vue通过数据驱动构建ui界面。

课件内容：

1.生命周期

beforeCreated created beforeMount mounted beforeUpdate updated beforeDestory destoryed

2.模板语法

{{}}

v-bind:class 缩写:class 绑定属性

v-on:click 缩写 @click 绑定事件

<div :title="标题" @click="ck">{{title}}</div>

3.计算属性和侦听属性

computed 计算属性

watch 侦听属性

4.Class 与 Style 绑定

5.if条件

</div>

</div>

</div>

6.for列表

</div>

7.事件处理

8.表单v-model

代码片段：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .title {
        color: red;
      }
</style>
  </head>
  <body>
    <div id="App">
      <h3 :title="title" class="a" :style="{fontSize:fs}" :class="titleClass">{{title}}</h3>
      <div @click="at('me')">{{content}}</div>
      <div v-html="html"></div>
      <div v-if="a==2">{{a}}</div>
      <div v-else-if="b==10">{{b}}</div>
      <div v-else>
        {{c}}
      </div>
      <div v-for="(item,index) in lists" :key="index">
        <div :class="titleClass" v-if="item==1">{{item}}</div>
        <div v-else>
          {{item}}
        </div>

      </div>
      <div>
        <div v-for="(item,name,index) in items" :key="index">
          {{index}}:{{name}}:{{item}}
        </div>

      </div>

      <form @submit.prevent="submit">
        <div>单行文本</div>
        <input type="text" v-model="formData.title" />
        <div>多行文本</div>
        <textarea v-model="formData.content"></textarea>
        <div>单个复选框</div>
        <input type="checkbox" true-value="1" false-value="0" id="checkbox" v-model="formData.islove">
        {{formData.islove}}
        <label for="checkbox">喜欢读书</label>
        <div id='example-3'>
          <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
          <label for="jack">Jack</label>
          <input type="checkbox" id="john" value="John" v-model="checkedNames">
          <label for="john">John</label>
          <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
          <label for="mike">Mike</label>
          <br>
          <span>Checked names: {{ checkedNames }}</span>
        </div>
        <div id="example-4">
          <input type="radio" id="one" value="One" v-model="picked">
          <label for="one">One</label>
          <br>
          <input type="radio" id="two" value="Two" v-model="picked">
          <label for="two">Two</label>
          <br>
          <span>Picked: {{ picked }}</span>
        </div>
        <div id="example-6">
  <select v-model="selected"   style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>
        <button type="submit">提交</button>
      </form>



    </div>
    <script src="../vue.js"></script>
    <script>
      var app = new Vue({
        el: "#App",
        data: function() {
          return {
            fs: '14px',
            titleClass: "title",
            title: "认识vue",
            content: "这是vue内容",
            html:"<p>这是富文本表</p><p><h1>富文本</h1></p>",
            a: 1,
            b: 10,
            c: 20,
            lists: [0, 1, 2, 3, 4, 5, 6],
            items: {
              "a": "aaa",
              "b": "bbb"
            },
             selected: 'B',
            checkedNames: ['Jack'],
            picked: 'Two',
            formData: {
              title: "",
              content: "",
              islove: 0,

            }
          }
        },
        created: function() {
          this.getPage();
        },
        methods: {
          getPage: function() {
            this.title = "文章标题-认识vue";
          },
          at: function(str) {
            alert(str)
          },
          submit: function(e) {
            var that=this;
           
            alert("提交表单了");
            console.log(this.formData)
            return false;
          }
        }
      })
</script>
  </body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-08-14，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js