vue第一课：简单了解

1，通过JS引入，学习的时候通过CDN即可

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

2，在HTML文件中

<!--
    初识Vue:
    1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
    2.root容器的代码依然符合HTML规范，只不过混入了一些特殊的Vue语法；
    3.root容器里的代码被称为[Vue模版];
-->
<div id ='root'>
    <h1>hello,{{name}}</h1>
</div>
<script type='text/javascript'>
    vue.config.productionTip=false //组织vue在启动时生成生产提示
    new Vue({
    el:'#root', //el用于指定当前Vue实例为哪个容器服务
    data:{
        name:'Vue',
    }    
    })
</script>

3，简单实例1：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>


  </title>
  <script src="vue.js"></script>

</head>

<!--
    初识Vue:
    1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
    2.root容器的代码依然符合HTML规范，只不过混入了一些特殊的Vue语法；
    3.root容器里的代码被称为[Vue模版];
-->
<body>
  <div id='root'>
    <h2>今天天气很{{info}}</h2>
    <button @click="changeweather">切换天气</button>
  </div>
</body>

<script text="text/javascript">
  Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
  new Vue({
    el: '#root', //el用于指定当前Vue实例为哪个容器服务
    data:{
     isHot:true
    },
    computed:{
      info(){
        return this.isHot ? '炎热':'凉爽'
      }
    },
    methods: {
      changeweather(){
        this.isHot = !this.isHot
      }
    },
  })
</script>

</html>

4，简单示例2

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>


  </title>
  <script src="vue.js"></script>

</head>

<!--
    初识Vue:
    1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
    2.root容器的代码依然符合HTML规范，只不过混入了一些特殊的Vue语法；
    3.root容器里的代码被称为[Vue模版];
-->

<body>
  <div id='root'>
    <h2>今天天气很{{info}}</h2>
    <button @click="isHot = !isHot">切换天气</button>
  </div>
</body>

<script text="text/javascript">
  Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
  new Vue({
    el: '#root', //el用于指定当前Vue实例为哪个容器服务
    data: {
      isHot: true
    },
    computed: {
      info() {
        return this.isHot ? '炎热' : '凉爽'
      }
    },
   // methods: {
     // changeweather() {
     //   this.isHot = !this.isHot
    //  }
   // },
  })
</script>

</html>

5，简单实例3

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>
  </title>
  <script src="vue.js"></script>
</head>
<!--
    初识Vue:
    1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
    2.root容器的代码依然符合HTML规范，只不过混入了一些特殊的Vue语法；
    3.root容器里的代码被称为[Vue模版];
-->
<body>
  <div id='root'>
    <h2>今天天气很{{info}}</h2>
    <button @click="changeweather">切换天气</button>
  </div>
</body>

<script text="text/javascript">
  Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
  new Vue({
    el: '#root', //el用于指定当前Vue实例为哪个容器服务
    data:{
     isHot:true
    },
    computed:{
      info(){
        return this.isHot ? '炎热':'凉爽'
      }
    },
    methods: {
      changeweather(){
        this.isHot = !this.isHot
      }
    },
  })
</script>

</html>
 
posted @ 2023-04-01 09:53  super_ip  阅读(102)  评论(0)  编辑  收藏  举报