Vue 3.X学习笔记
邹林林
2022年6月
安装npm
安装vue版本 npm I –g @vue/cli@next
npm init vite@latest project --template vue
建立project：npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
安装vscode及针对Vue的插件，打开project
文件夹可以进行
<!DOCTYPE html>
<script src="./vue3.js"></script>
<body>
<div id="count">
<p>
{{l}}
</p>
<p>
{{p}}
</p>
</div>
<script>
const counter={
data:function(){
return {
l:0,
p:1
}
}
}
Vue.createApp(counter).mount('#count') ;
</script>
</body>
准备
2022/6/19
模板语法
2022/6/19
• v-once 值只刷新一次，用在标签上
• methods:给vue实例定义一个方法
v-once用法
<template>
<h1>{{ msg }}</h1>
<button @click="count++">count is: {{ count }} </button>
<button>{{zll}}</button> //值变了会一直跟着刷新
<p v-once>{{zll}}</p>//只会渲染一次，值变化不在变
<button>{{zltest}}</button>
<button @click="changeZll">changezll</button>
<p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>
<script>
import { reactive } from '@vue/reactivity'
import { computed, onUnmounted } from '@vue/runtime-core';
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
count: 0,
counter: 2,
ll:100,
zll:100
}
},
methods:{
changeZll(){
this.zll=99999999
}
}
}
</script>
2022/6/19
v-html用法
• 输出html
<template>
<h1>{{ msg }}</h1>
<button @click="count++">count is: {{ count }} </button>
<button>{{zll}}</button> <!--
值变了会一直跟着刷新
-->
<p v-once>{{zll}}</p><!--
只会渲染一次，值变化不在变
-->
<p v-html="msg"> </p><p >{{msg}} </p>
<button @click="changeZll">changezll</button>
<p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>
<script>
import { reactive } from '@vue/reactivity'
import { computed, onUnmounted } from '@vue/runtime-core';
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
count: 0,
zll: 100,
msg:"<h2>Vue</h2"
}
},
methods:{
changeZll(){
this.zll=99999999
}
}
}
</script>
2022/6/19
