专栏首页老雷PHP全栈开发老雷PHP全栈开发教程之Vue基础教程

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

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 绑定

<div :class="{ active: isActive }"></div>

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

5.if条件

<div v-if="type === 'A'">

A

</div>

<div v-else-if="type === 'B'">

B

<div v-for=""></div>

</div>

<div v-else>

C

</div>

6.for列表

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

<div v-if=""></div>

<!-- 内容 -->

</div>

7.事件处理

<div @tap="cc">点击事件</div>

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>

本文分享自微信公众号 - 老雷PHP全栈开发(L362606856),作者:雷日锦

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 老雷PHP全栈开发教程之常用html标签

    老雷PHP全栈开发
  • jQuery基础教程之选择器

    老雷PHP全栈开发
  • html教程之布局与文本元素

    src 文件链接 通常 img,audio,video,iframe,script

    老雷PHP全栈开发
  • 前端-part8-jQurey操作样式一:获取标签属性+修改标签属性

    少年包青菜
  • HTML5选择器

    czjwarrior
  • 一起学爬虫——使用xpath库爬取猫眼电

    之前分享了一篇使用requests库爬取豆瓣电影250的文章,今天继续分享使用xpath爬取猫眼电影热播口碑榜

    py3study
  • HTML规范 - 整体结构

    申霖
  • 零基础html5+div+css+js网页开发教程第006期 网页快速开发技巧

    上一节,我们学习了hbuilder的快速开发工具的简单实用,本机额,我们来介绍这个工具相关的快速开发技巧。

    刘金玉编程
  • HTML&CSS书写规范

    第一部分:HTML书写规范: 1.1 HTML整体结构: 1.1.1:HTML基础设施: 文档以"<!DOCTYPE...>"首行顶格开始,推荐使用"<!DOC...

    用户1149564
  • H5页面实现原理分析

    <!doctype html> <html> <head> <style> html{overflow:hidden;} body{margin:0;} .w...

    用户1730674

扫码关注云+社区

领取腾讯云代金券