上传到网站的根目录中,苏州网站开发公司兴田德润优惠吗,保定网站建设优化,公司注册资金最新规定声明：这只是我个人的学习笔记（黑马），供以后复习用 。一天学一点，随时学随时更新。明天会更好的！
这里只给代码，不给运行结果，看不出来代码的作用我也该进厂了。。。。。
Day1 使用create-vue创建项目。
1.检查版本。
node -v
2.创建项目
npm init vue@latest
可…声明：这只是我个人的学习笔记（黑马），供以后复习用 。一天学一点，随时学随时更新。明天会更好的！
这里只给代码，不给运行结果，看不出来代码的作用我也该进厂了。。。。。
Day1 使用create-vue创建项目。
1.检查版本。
node -v
2.创建项目
npm init vue@latest
可以用这个切回国内镜像源
npm config set registry https://registry.npmmirror.com
3. 安装依赖，启动项目
npm install
npm run dev
4.1写法
原始复杂写法setup写法：必须return
!-- 开关：写组合式组件 --
script
export default {setup() {console.log('setup')const message = 'hello world'const logMessage = () = {console.log(message)}return {//只有return返回一个对象，对象中的属性和方法，都可以在模板中使用message,logMessage,}},beforeCreate() {console.log('beforeCreate')},
}
/scripttemplate!-- 不再要求唯一的根元素 --div{{ message }}button @click="logMessage"log/button/div
/templatestyle scoped/style简单的语法糖写法
script setup
const message = 'hello world'
const logMessage = () = {console.log(message)
}
/script
template!-- 不再要求唯一的根元素 --div{{ message }}button @click="logMessage"log/button/div
/templatestyle scoped/style
注：1.setup选项在beforeCreate钩子之前自动执行 2.setup中的this不指向组件实例了,指向undefined 4.2 函数调用返回响应式数据
reactive()接受对象类型数据的参数传入并返回一个响应式的对象
script setup
// 1.导入函数
import { reactive } from 'vue'
// 2.执行函数 传入一个对象类型的函数 变量接受
const state = reactive({count: 0
})
const setCount = () = {state.count++
}
/script
template!-- 不再要求唯一的根元素 --divbutton @click='setCount'{{ state.count }}/button/div
/templatestyle scoped/styleref()接受简单类型或对象类型数据的参数传入并返回一个响应式的对象
脚本区域修改ref的响应式数据 必须通过value属性
script setup
// // 1.导入函数
// import { reactive } from 'vue'
// // 2.执行函数 传入一个对象类型的函数 变量接受
// const state = reactive({
// count: 0
// })
// const setCount = () = {
// state.count++
// }//1.导入ref 函数
import { ref } from 'vue'
//2.执行函数 传入一个简单类型或者对象类型的参数 变量接受
const count = ref(0)
console.log(count)const setCount = () = {//脚本区域修改ref的响应式数据 必须通过value属性count.value++
}
/script
template!-- 不再要求唯一的根元素 --divbutton @click='setCount'{{ count }}/button/div
/templatestyle scoped/style4.3计算属性函数
computed 返回计算后的数据（不应该有副作用）
script setup
// 1.导入computed
import { computed } from 'vue'
import { ref } from 'vue'
const list = ref([1, 2, 3, 4, 5, 6, 7, 8])// 2.使用computed return计算后的值 变量接受
const computedList = computed(() = {return list.value.filter(item = item 2)
})setTimeout(() = {list.value.push(9, 10)
}, 3000);
/script
template!-- 不再要求唯一的根元素 --div原始响应式数据-{{ list }}/divdiv计算后的响应式数据-{{ computedList }}/div
/templatestyle scoped/style4.4watch函数
侦听一个或多个数据的变化，数据变化时执行回调函数（参数：immediate(立即执行)，deep(深度侦听)）
script setup
// import {ref,watch} from 'vue'
// const count = ref(0)
// const setCount = () = {
// count.value++
// }
// //调用watch方法，监听count的变化
// //watch 里面ref对象不需要加.value属性
// watch(count, (newValue, oldValue) = {
// console.log(`count发生了变化，老值是${oldValue}，新值是${newValue}`);
// })import { ref, watch } from 'vue'
const count = ref(0)
const changeCount = () = {count.value++
}
const name = ref('cp')
const changeName = () = {name.value = 'pc'
}watch([count,name], ([newValue,newName], [oldValue,oldName]) = {console.log(`count或者name发生了变化，老值是${[oldValue,oldName]}，新值是${[newValue,newName]}`);
})
/script
template!-- 不再要求唯
