198work vue基础template静态代码与JavaScript组合使用案例1（一看就懂）

   

 如果是打游戏，不过就是两个道具，组合起来使用更厉害的，犹如吃鸡游戏。

效果：

  

<template>
  <div>
    <!-- 写一个按钮，给按钮加属性。 加点击事件。 点击时触发btnclick事件。  -->
    <!-- <el-button type="success" @click="btnClick">测试按钮</el-button>
    <p>{{ form.realName }}</p>

    <input type="text" v-model="form.realName" />
    <hr />
    <el-link type="primary" v-for="item in nums" :key="item"
      >主要链接-{{ item }}</el-link
    > -->

    <!-- button按钮练习1  -->
    <el-button> 这是一个最简单的按钮标签 静态写死的按钮</el-button>
    <!-- 2 加了点击事件。就必须从JS代码里面写方法，去访问，调用！ -->
    <el-button @click="clickEventName">给这个按钮加一个点击事件</el-button>

    <!-- 3 加type类型   type="add"  大小写一定要写对，否则代码不执行。  -->
    <el-button type="add" @click="clickEventNameTwo"
      >逐层添加属性，按钮3点击事件包含测试，包含type</el-button>
   <!-- 4 输入框练习测试 --> 
   <!-- 这是一个最简单的输入框 -->
   <input type="text">  
   <!-- 2 -->
    <el-input  >这是一个加入了el标签的输入框</el-input>

    <!-- 2.1 -->
    <el-input v-model="input"   placeholder="请输入内容 加入v-model属性的输入框2"></el-input>

 <el-input placeholder="加入 placeholder占位符属性的输入框3"></el-input>





  </div>
 <!-- 总结：
  
   1 不加JS代码的模板代码，只是静态的页面。不会动的， 犹如搞女人，死鱼一样，加上声音等于加上了JS了。
     动态的行为。
        静态的页面，仅仅只是展示功能，这个肯定不能客户需求。所以必须加行为，加JavaScript代码！
      当然，首先从网页显示出来是第一步。然后是点击，执行JS代码，出现行为，这个代码就写正确了。如果连展示都不能展示，说明template
      代码都没有写对！ 这是顺序。 
     -->

</template>

<script>
export default {
  // data() {
  //   return {
  //     form: {},  // form表单测试
  //     nums: [1, 2, 3, 10],  //  数组
  //   };
  // },
  // methods: {
  //   btnClick: function () {
  //     alert("按钮点击了");
  //     this.form.realName = "李四";
  //   },
  // },

// data 数据 函数的定义。  
  data() {
    return {
      form: {},
      input:'',
    };
  },

  //
  methods: {
    //  函数1  点击触发静态代码1，去执行行为。 犹如静态代码犹如人的念头，只是想。 发到外面是言行，言行就是JS代码实现的。

    clickEventName: function () {
      alert("点击触发点击事件");
    },
    // 函数2 函数知识点使用 练习
  //  函数2  function关键字必须要有的！ 
    clickEventNameTwo: function () { // 1 工作中代码，改函数名字，改成这个。试试不报错就用这个。简单明白能看懂。

      alert("点击触发按钮3的事件");
    },

    // 函数应用程序案例3 


  },
  
};
</script>