<template><divclass="home"><p>我的名字是:{{ name }}</p><p>我的年龄是:{{ age }}</p><button@click="handleClick">点我看信息</button></div></template><script>exportdefault{setup(){// 1 定义数据const name ='lqz'let age =19// 2 定义方法constshowInfo=()=>{alert(`姓名是:${name},年龄是:${age}`)}return{name, age, showInfo}},methods:{handleClick(){alert(`姓名是:${this.name},年龄是:${this.age}`)}}}</script>
3 ref函数
<template><divclass="home"><p>我的名字是:{{ name }}</p><p>我的年龄是:{{ age }}</p><button@click="handleAdd">点我年龄+1</button><button@click="handleChangeName">点我秒变彭于晏</button></div></template><script>// 变量要具备响应式---》页面内容变化,变量和变,变量变化,页面也变// 普通变量,通过ref绑定响应式// 引用类型变量:通过reactive 绑定响应式import{ref}from'vue'exportdefault{setup(){// 1 定义数据let name =ref('lqz')let age =ref(19)// 2 定义方法consthandleAdd=()=>{age.value +=1console.log(typeof age)}consthandleChangeName=()=>{name.value ='彭于晏'}return{name, age, handleAdd,handleChangeName}},}</script>
<template><divclass="home"><h1>首页</h1></div></template><script>import axios from"axios";import{computed,watch,reactive,ref,watchEffect,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted
}from'vue'exportdefault{name:'HomeView',setup(){// 第一个beforeCreteconsole.log('我是beforeCrete')// 第二个Cretedlet name =ref('lqz')console.log('Creted')// axios.get().then(res => {// name.value = res.data.name// })// 直接启动定时器let t =setInterval(()=>{console.log('lqz')},3000)// 第三个:onBeforeMountonBeforeMount(()=>{console.log('挂载了')})onBeforeUnmount(()=>{clearInterval(t)t =null})return{}},}</script>
7 torefs的使用
<template><divclass="home"><h1>首页</h1>{{ name }}---{{ age }}</div></template><script>import axios from"axios";import{reactive,toRefs}from'vue'exportdefault{name:'HomeView',setup(){let data =reactive({name:'lqz',age:19})return{...toRefs(data)}},}// 对象的解压let data ={'name':'lqz',age:19}let dict={...data,hobby:'篮球'}console.log(dict)</script>
直接调用这个类即可,需要下载个GnuPlot安装下。
// Author: Leonardo Tazziniusing System;
using System.Diagnostics;
using System.Drawing;
using System.IO;
using System.Windows.Forms;/// <summary>
/// Tested with Gnuplot 5.2
/// </summary&g…