当前状况
因为大一上半学期学习JAVA SE,本来我也会一些前端知识,但也知识基础,正好用Vue的学习来完善一下我的前端的欠缺,后面再学习以下Springboot来作为后端,Android Studio来做移动端的开发,这样的搭配大概是比较适合现在的我的,下面是我这两天学习的笔记。
Vue3 的构建
Vue环境的部署方法有很多,我使用的是vite的方法,首先得安装比较新版本的nodejs,大概是在13以上,否则安装Vue的过程中会报错,我就遇到了。。完成后在bash中打开要安装Vue的目录,执行代码npm init vue@latest
bash中就会出现一些Vue中的一些选项,可以自行选择进行配置构建。
构建好后依次执行以下代码就可以进入开发者模式了。
cd day2
npm install // 自动安装需要的模块,仅仅第一次运行时需要使用
npm run lint // 这个是用于修复错误的配置的
npm run dev // 以开发者模式运行
进入开发者模式后打开它给的连接,界面如下,这样就代表Vue3成功的构建了出来
Vue常用语法
<script>
export default{
data() {
return{
uName: "xuanSAMA",
uAge: "19",
msg: "<h2>这是v-html的测试</h2>",
Did: "awesome",
poem: "鹏北海,凤朝阳",
Datt: "id",
target: "awesome"
}
},
methods: {
ageIcrease:function(){
this.uAge++;
}
}
}
</script>
<template>
<!-- 双大括号是引入data里的属性 -->
<p>uName: {{ uName }}</p>
<br />
<p>uAge: {{ uAge }}</p>
<br />
<!-- @是Vue中的一个语法糖 代表的是v-on 用于监听DOM事件-->
<button v-on:click="ageIcrease">Age +</button>
<br />
<!-- 这是@的写法与上面的代码效果一样 -->
<button @click="ageIcrease">Age +</button>
<br/>
<!-- v-once 这个指令代表只渲染一次 -->
<p v-once>当前年龄: {{ uAge }}</p>
<br/>
<!-- v-html 让内容以HTML的形式渲染 -->
<!-- 有被XSS攻击风险!慎用!! -->
<p v-html="msg"></p>
<br/>
<!-- v-bind 实现动态属性的指令 -->
<p v-bind:id="Did">{{ poem }}</p>
<br/>
<!-- v-bind 的语法糖是 : -->
<p :id="Did">又携书剑路茫茫。</p>
<!-- 双大括号还可以在里面执行js代码 -->
<!-- 例如随便来个文字翻转 -->
{{ poem.split('').reverse().join('') }}
<br/>
<!-- []可以实现动态参数的效果 -->
<p :[Datt]='target'>测试</p>
<button @click="Datt='class'">改变Datt</button>
</template>
<style scoped>
#awesome {
color: forestgreen;
}
.awesome {
color: skyblue;
}
</style>
Vue的计算属性与方法
<script>
export default{
data() {
return{
testContent: 'We1c0me t0 Vue3',
testNumber: 0,
testObj:{
Num: 0
}
}
},
// computed的作用是可以将一个方法当作属性使用
// 只要依赖值不变,那么不会从新计算
computed:{
timeStamp(){
return Date.now();
// 响应式依赖,永不更新
},
// 每个computed都有getter和setter
// 以上只是简写,仅仅写了getter
// 以下为完整写法
reverseText: {
get() {
return this.testContent.split('').reverse().join('');
},
set(newValue) { //在设置或改变计算属性的时候会执行的代码
//不知道为啥,在这个代码中改变不会执行set....ma一下,后面再来看
console.log(newValue);
}
}
},
// watch是监听器可以检测属性的变化
// 在watch中的函数名对应需要检测的属性名
watch:{
testContent(newData,oldData){// 这里代表要检测testcontent的变化
// 第一个形参表示变化后的值,第二个表示之前的值
console.log(oldData + "--->" + newData);
},
testNumber:{
immediate:true,// 是否初始化时就检测
handler:function(newData){
console.log("我现在是"+newData);
}
},
// 检测对象属性的变化
// 这貌似就是深度监听
"testObj.Num":function(newData){
console.log("我现在是"+newData);
}
}
}
</script>
<template>
<p>{{ timeStamp }}</p>
<br>
{{ reverseText }}
<input type="text" v-model="testContent" />
<button @click="testNumber++">{{ testNumber }}</button>
<button @click="testObj.Num++">{{ testObj.Num }}</button>
</template>
<style>
</style>
条件渲染v-if v-show与列表渲染
<script>
export default {
data(){
return {
goods: ["农夫三拳","康帅夫","雷碧"]
}
}
}
</script>
<template>
<p v-if="true">可以看见,并且渲染了</p>
<br/>
<p v-if="false">看不见,并且没渲染</p>
<br/>
<p v-show="true">可以看见,并且渲染了</p>
<br/>
<p v-show="false">不可看见,但渲染了</p>
<!-- 通过f12可知v-show仅仅在标签上加了display为不可见的标识 -->
<!-- 但需要注意的是v-if会增加性能负担适情况使用v-if和v-show是一个优化的点 -->
<!-- 以下是列表渲染 v-for -->
<br/>
商品列表
<ul>
<li v-for="(item,key) of goods" :key="key">{{ item }}</li>
</ul>
<button @click="goods.push('可口可勒')">添加商品</button>
<!-- key为什么要添加? -->
<!-- key是列表元素的唯一标识 -->
<!-- 也是Vue维护状态的参照物 -->
<ul>
<li v-for="(item,key) of goods" :key="key"><input type="checkbox" name="" id="">{{ item }}</li>
</ul>
</template>
<style>
</style>