import * as m1 from './module.js'
import {Person,sum,PI} from './module.js'

npm config set registry https://registry.npmmirror.com

npm create vite@latest

<script setup lang="ts">
import { ref } from 'vue';

let message = ref('你好')
function changeMessage() {
  message.value = '666'
}
</script>
<script lang="ts">
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>


<template>
  {{ message }}
  {{ msg }}
  <button @click="changeMessage">changeMessage</button>
</template>

import {ref,reactive} from 'vue'

<script>
    let counter = ref(10);
    function add(){
        counter.value++;
    }
</script>
<template>
	<div>
        <button @click="add()">counter</button>
        <!--或-->
		<button @click="counter++">counter</button>	
    </div>
</template>

<script setup()>
    let person = reactive({
        name:"",
        age:10
    })
    function change(){
        Object.assgin(person,{name:'张三',age:12})
	}
</script>
<template>
	<div>
		<button @click="change()">reactive</button>	
    </div>
</template>

<!--script略-->
<template>
  <div>
    <h1>{{ msg }}</h1>
    msg的值为: {{ msg }} <br>
    getMsg返回的值为:{{ getMsg() }}  <br>
    是否成年: {{ age>=18?'true':'false' }} <br>
    反转: {{ bee.split(' ').reverse().join('-') }} <br>
    购物车总金额: {{ compute() }} <br/>
    购物车总金额: {{carts[0].price*carts[0].number + carts[1].price*carts[1].number}} <br>
  </div>
</template>

<template>
        <h1>{{ a }}</h1>
        <h2>{{ list }}</h2>
</template>
<script lang="ts" setup name="Person">
import { PropType } from 'vue'
import {type Persons} from './PersonInter'
// 定义props 并接收props
    let x = defineProps({
        a: {
            type: String,
            default: '123'
        },
        list: {
            //定义props时指定复杂类型
            type: Object as PropType<Persons>,
            default:() => [{name:'张三',age:18},{name:'李四',age:19}]
        }
    })
    // 也可以这样定义props
    defineProps<{a:string,list:Persons}>()
    console.log(x.a)
    console.log(x.list)
</script>

<script setup lang="ts">
import Person from './components/Person.vue'
import { ref } from 'vue'
import {type Persons} from './components/PersonInter'
const personList = ref<Persons>([
  {name: '张三',age: 18,sex: '男'},
  {name: '李四',age: 19,sex: '女'}
])
</script>

<template>
  <div>
    <Person a="123" :list="personList"></Person>
  </div>
</template>

<script type="module" setup>
    import {ref} from 'vue'
    let awesome = ref(true)
</script>

<template>
  <div>
    <h1 id="ha"  v-show="awesome">Vue is awesome!</h1>
    <h1 id="hb"  v-if="awesome">Vue is awesome!</h1>
    <h1 id="hc"  v-else>Oh no 😢</h1>
    <button @click="awesome = !awesome">Toggle</button>
  </div>
</template> 

<script type="module" setup>

    //引入模块
    import { reactive} from 'vue'
    //准备购物车数据,设置成响应数据
    const carts = reactive([{name:'可乐',price:3,number:10},{name:'薯片',price:6,number:8}])

    //计算购物车总金额
    function compute(){
      let count = 0;
      for(let index in carts){
        count += carts[index].price*carts[index].number;
      }
      return count;
    }
    //删除购物项方法
    function removeCart(index){
      carts.splice(index,1);//(0,xx.length)是删除全部
    }
    
</script>

<template>
    <div>
        <table>
           <thead>
               <tr>
                  <th>序号</th>
                  <th>商品名</th>
                  <th>价格</th>
                  <th>数量</th>
                  <th>小计</th>
                  <th>操作</th>
               </tr>
           </thead>
           <tbody v-if="carts.length > 0">
               <!-- 有数据显示-->
               <tr v-for="cart,index in carts" :key="index">
                  <th>{{ index+1 }}</th>
                  <th>{{ cart.name }}</th>
                  <th>{{ cart.price + '元' }}</th>
                  <th>{{ cart.number }}</th>
                  <th>{{ cart.price*cart.number  + '元'}}</th>
                  <th> <button @click="removeCart(index)">删除</button> </th>
               </tr>
           </tbody>
           <tbody v-else>
               <!-- 没有数据显示-->
               <tr>
                  <td colspan="6">购物车没有数据!</td>
               </tr>
           </tbody>
        </table>
        购物车总金额: {{ compute() }} 元
    </div>
</template> 

<style scoped>
</style>

<script type="module" setup>

  //引入模块
  import { reactive,ref} from 'vue' 
  let hbs = ref([]); //装爱好的值
  let user = reactive({username:null,password:null,introduce:null,pro:null})   
  function login(){
    alert(hbs.value);
    alert(JSON.stringify(user));
  }
  function clearx(){
    //user = {};// 这中写法会将数据变成非响应的,应该是user.username=""
    user.username=''
    user.password=''
    user.introduce=''
    user.pro=''
    hbs.value.splice(0,hbs.value.length);;
  }
</script>

<template>
  <div>
      账号： <input type="text" placeholder="请输入账号！" v-model="user.username"> <br>
      密码： <input type="text" placeholder="请输入账号！" v-model="user.password"> <br>
      爱好： 
        吃 <input type="checkbox" name="hbs" v-model="hbs" value="吃"> 
        喝 <input type="checkbox" name="hbs" v-model="hbs" value="喝">
        玩 <input type="checkbox" name="hbs" v-model="hbs" value="玩">
        乐 <input type="checkbox" name="hbs" v-model="hbs" value="乐">
      <br>
      简介:<textarea v-model="user.introduce"></textarea>
      <br>
      籍贯:
          <select v-model="user.pro">
            <option value="1">黑</option>
            <option value="2">吉</option>
            <option value="3">辽</option>
            <option value="4">京</option>
            <option value="5">津</option>
            <option value="6">冀</option>
          </select> 
      <br>
      <button @click="login()">登录</button> 
      <button @click="clearx()">重置</button>
      <hr>
      显示爱好:{{ hbs }}
      <hr>
      显示用户信息:{{ user }}
  </div> 
</template> 

<style scoped>
</style>

<template>
  <h1>这是测试路由的主页</h1>
  <!-- 导航栏 -->
  <div class="nav">
    <router-link to="/" class="active">首页</router-link>
    <router-link to="/help">帮助</router-link>
    <router-link to="/news">新闻1</router-link>
  </div>
  <div class="content">
    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

let newsList = reactive([
    {id:1,title:'新闻1',content:'新闻1内容'},
    {id:2,title:'新闻2',content:'新闻2内容'},
    {id:3,title:'新闻3',content:'新闻3内容'},
    {id:4,title:'新闻4',content:'新闻4内容'},
    {id:5,title:'新闻5',content:'新闻5内容'}
])
</script>

<template>
    <div class="news">News
        <ul>
            <li v-for="item in newsList" :key="item.id">
                <!-- 这里可修改query或params  -->
                <router-link :to="{name:'news-detail',
                query:{id:item.id,
                    title:item.title,
                    content:item.content}}">{{item.title}}</router-link>
            </li>
        </ul>
    </div>
    <div class="news-content">
        <router-view ></router-view>
    </div>


</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
let route = useRoute();

</script>

<template>
    <ul class="news-detail">
        <!-- 这里可修改query或params  -->
        <li>编号: {{route.query.id}}</li>
        <li>标题：{{ route.query.title }}</li>
        <li>内容：{{ route.query.content }}</li>

    </ul>

</template>

<script setup lang="ts">
defineProps(['id','title','content'])
</script>

<template>
    <ul class="news-detail">
        <li>编号: {{id}}</li>
        <li>标题：{{ title }}</li>
        <li>内容：{{ content }}</li>
    </ul>
</template>

npm install axios

<script setup>
import { onMounted,ref } from 'vue'
import axios from 'axios'

let message = ref('')
function getMessage() {
  axios({
    method: 'get',
    url: 'https://api.uomg.com/api/rand.qinghua?format=json',
    data: {

    }
  }).then(function (response) {
    console.log(response)
    console.log(response.data)
    console.log(response.data.content)
    message.value = response.data.content
    
  }).catch(function (error) {
    console.log(error)
  })
  }
  // 通过onMounted生命周期函数，在页面加载时，调用getMessage方法
  // onMounted(() => {
  //   getMessage()
  // })

</script>

<template>
    <div>
      <h1 v-text="message"></h1>
      <button @click="getMessage()">变</button>
    </div>
</template>

<style scoped>
</style>

<script setup type="module">
    import { ref} from 'vue';
    import { definedPerson} from '../store/store';
    // 读取存储的数据
    let person= definedPerson()
    //订阅 store 的状态变化 本次修改的信息 谁 和  修改后的数据  是什么
    peron.$subscribe((mutate,state)=>{
        consolg.log('peron数据发生了变化',mutate,state)
	})

    let hobby = ref('')
   
</script>

<template>
    <div>
        <h1>operate视图,用户操作Pinia中的数据</h1>
        请输入姓名:<input type="text" v-model="person.username"> <br>
        请输入年龄:<input type="text" v-model="person.age"> <br>
        请增加爱好:
        <input type="checkbox" value="吃饭"  v-model="person.hobbies"> 吃饭
        <input type="checkbox" value="睡觉"  v-model="person.hobbies"> 睡觉
        <input type="checkbox" value="打豆豆"  v-model="person.hobbies"> 打豆豆 <br>
        
        <!-- 事件中调用person的doubleAge()方法 -->
        <button @click="person.doubleAge()">年龄加倍</button> <br>
        <!-- 事件中调用pinia提供的$reset()方法恢复数据的默认值 -->
        <button @click="person.$reset()">恢复默认值</button> <br>
        <!-- 事件中调用$patch方法一次性修改多个属性值 -->
        <button @click="person.$patch({username:'奥特曼',age:100,hobbies:['晒太阳','打怪兽']})">变身奥特曼</button> <br>
		显示pinia中的person数据:{{person}}
    </div>
</template>
<style scoped>
</style>

<script setup type="module">
    import { definedPerson} from '../store/store';
    // 读取存储的数据
    let person= definedPerson()
</script>

<template>
    <div>
        <h1>List页面,展示Pinia中的数据</h1>
        读取姓名:{{person.username}} <br>
        读取年龄:{{person.age}} <br>
        通过get年龄:{{person.getAge}} <br>
        爱好数量:{{person.getHobbiesCount}} <br>
        所有的爱好:
        <ul>
            <li v-for='(hobby,index) in person.hobbies' :key="index" v-text="hobby"></li>
        </ul>
    </div>
</template>

<style scoped>
</style>

npm i mitt