vue的两种写法

旧城等待， 2022-09-10 12:11 271阅读 0赞

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
      </head>
      <body>
        <div id="app">
          <ol>
            <li v-for="site in sites">{
       { site.text }}</li>
          </ol>
        </div>
    
        <script>
          new Vue({
            el: "#app",
            data: {
              sites: [{ text: "Google" }, { text: "Runoob" }, { text: "Taobao" }],
            },
          });
        </script>
      </body>
    </html>

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
    <div id="app">
      <ol>
        <li v-for="site in sites">
          {
       { site.text }}
        </li>
      </ol>
    </div>
    <script>
    const app = {
      data() {
        return {
          sites: [
            { text: 'Google' },
            { text: 'Runoob' },
            { text: 'Taobao' }
          ]
        }
      }
    }
    
    Vue.createApp(app).mount('#app')
    </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
https://www.cnblogs.com/fdxjava/p/11594612.html

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		
    		<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div id="app">
    			{
       { counter }}
    			<div v-for="city in list" @click="clickSerch(city)">
    				<a href="#">{
       {city}}</a>
    			</div>
    			<div v-for="bl in next" @click="haha()">
    				{
       {bl}}
    			</div>
    		</div>
    		<script>
    			const App = {
    				data() {
    					return {
    						counter: 0,
    						list: ['北京','杭州','成都','重庆'],
    						next:[0],
    					}
    				},
    				methods:{
    					clickSerch(city){
    						console.log(city);
    					},
    					haha(){
    						console.log(next);
    					}
    				}
    			};
    			Vue.createApp(App).mount('#app');
    		</script>
    	</body>
    </html>

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>天知道</title>
        <link rel="stylesheet" href="css/reset.css" />
        <link rel="stylesheet" href="css/index.css" />
      </head>
    
      <body>
        <div class="wrap" id="app">
          <div class="search_form">
            <div class="logo"><img src="img/logo.png" alt="logo" /></div>
            <div class="form_group">
              <input
                type="text"
                class="input_txt"
                placeholder="请输入查询的天气"
                v-model="city"
                @keyup.enter="queryWeather"
              />
              <button class="input_sub" @click="queryWeather">搜 索</button>
            </div>
            <div class="hotkey">
              
              <a
                href="javascript:;"
                v-for="city in hotCitys"
                @click="clickSearch(city)"
                >{
       { city }}</a
              >
            </div>
          </div>
          <ul class="weather_list">
            <li
              v-for="(item,index) in forecastList"
              :key="item.date"
              :style="{transitionDelay:index*100+'ms'}"
            >
              <div class="info_type">
                <span class="iconfont">{
       { item.type }}</span>
              </div>
              <div class="info_temp">
                <b>{
       { item.low}}</b>
                ~
                <b>{
       { item.high}}</b>
              </div>
              <div class="info_date">
                <span>{
       { item.date }}</span>
              </div>
            </li>
          </ul>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script>
          new Vue({
            el: "#app",
            data: {
              city: "武汉",
              forecastList: [],
              hotCitys: ["北京", "上海", "广州", "深圳"],
            },
            methods: {
              queryWeather() {
                this.forecastList = [];
                // console.log("haha");
                // console.log(this);
                console.log(this.forecastList);
                console.log("haha");
                axios
                  .get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`)
                  .then((res) => {
                    console.log(res);
                    //拿到这里的数据
                    this.forecastList = res.data.data.forecast;
                    console.log(this.forecastList);
                  })
                  .catch((err) => {
                    console.log(err);
                  })
                  .finally(() => {});
              },
              clickSearch(city) {
                this.city = city;
                // this.queryWeather();
              },
            },
          });
        </script>
      </body>
    </html>

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/3aedc1162422423d8ac304218bad7af5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/f4db365aee33416cb43dbe70f8b77455.png