node版本查看
nvm list
node -v
* 16.20.0 (Currently using 64-bit executable)
VUE版本查看 package.json 文件
"dependencies": {"vue": "^3.3.4"},
VScode 安装 volar 插件有利于开发。
浏览器图标 ico
VUE使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。
所有的 Vue 模板上都是语法层面合法的 HTML， 可以被符合规范的浏览器和 HTML 解析器解析。
npm init vue@latest
#创建一个新的项目
项目构建完成，可执行以下命令：cd vue-projectnpm installnpm run dev
安装依赖
cnpm install
#安装依赖 node_moules
启动程序
npm run dev
#启动程序
删除所有的components目录下的文件
App.vue 文件内删除的只剩下基本框，注意：script和template的顺序没有限制
<script>
</script><template>
</template>
写一个数据
<script>
export default {data(){return{msg:"test"}}
}
</script>
现在没有这个数据在template里写一个标签引入
<template><h3> 模板 </h3><p> {{msg}} </p>
</template>
删除main.js中引入的css模板
import './assets/main.css'
assets目录下的东西也都删除掉
可以定义多个数据
<script>
export default {data(){return{msg:"test"，hello:"hello world", <!-- 字符串支持字符串的方法 <p> {{ hello.split('').reverse().join('') }} </p>-->number:10, <!--数字,vue支持加减 <p> {{number + 1 }} </p> -->ok:true, <!-- 三目运算符 {{ok? 'YES' : 'NO'}} -->rawHtml: "<a href='https://www.baidu.com'> 百度 </a>" <!-- 如果直接用{{ rawHtml }} 会全部按照字符串调用，不会识别 a 标签。需要识别需要用到v-html -->}}
}
</script>
<p v-html="rawHtml"></p>
新项目
npm init vue@latest
#vue-demo
cnpm install
npm run dev
这次只保留HelloWorld.vue
components下的除了HelloWorld.vue的全部删除
App.vue只保留下面的代码
<script setup>import HelloWorld from './components/HelloWorld.vue'
</script><template><HelloWorld/>
</template>
main.js中删除以下代码。重点只关注HelloWorld
import './assets/main.css'
HelloWorld.vue中全部删除，只保留基础框架
<script>
</script>
<template>
</template>
{{msg}}不能在HTML attributes中响应，显示的是{{msg}}字符串。
如果想要响应，需要使用v-bind,这样就能显示映射
<template><div v-bind:id="dynamicId" v-bind:class="msg">测试</div>
</template><script>
export default{data(){return{msg:"active",dynamicId:"appID",dynmiClass:"appclass"}}
}
</script>
配合v-bind加入css元素
如果v-bind:XXX=“YYY”
YYY为null 或者 undefined
b-bind提供了简写
<div :id=“xxx” :class=“YYY”>
<template><div v-bind:id="dynamicId" v-bind:class="dynmiClass">测试</div>
</template><script>
export default{data(){return{msg:"active",dynamicId:"appID",dynmiClass:"appclass"}}
}
</script><style>
.appclass{color: red;font-size: 30px;
}
</style>
点击按钮。
<button :disabled="isButtonDisabled">Button</button>isButtonDisabled:false
<!-- disabled为不可点击 true则为不可点击，false则为可点击 -->
<!-- 有时候出现一些情况会设置为不可点击，所以button常被设置变量 -->
条件渲染。
components 创建新的vue
在components目录下创建一个文件 ifDemo.vue
然后再App.vue 下仿照HelloWorld去引入新的vue文件
import ifDemo from './components/ifDemo.vue'
条件渲染，如果v-if 为true 则能看见，为false则看不见。
如果加一个v-else则显示else的信息
<template><h3>条件渲染</h3><div v-if="flag"> 你能看见我么 </div>
</template>><script>
export default{data(){return{flag:true}}
}
</script>
<template><h3>条件渲染</h3><div v-if="flag"> 你能看见我么 </div><div v-else> 看不太清楚 </div>
</template>><script>
export default{data(){return{flag:true}}
}
</script>
v-else-if的用法
<template><h3>条件渲染</h3><div v-if="flag"> 你能看见我么 </div><div v-else> </div><div v-if="type === 'A'"> A </div><div v-else-if="type === 'B'"> B </div><div v-else-if="type === 'C'"> C </div><div v-else>Not A/B/C</div>
</template>
<script>
export default {data(){return{flag:true,type: "D"}}
}
</script>
v-if是惰性的，为true时才会执行。
v-show有更高的切换开销。
列表item
在components下创建一个文件ListDemo
在App.vue下导入，并进行引用
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import IfDemo from './components/IfDemo.vue'
import ListDemo from './components/ListDemo.vue'
</script>
<template><HelloWorld/><IfDemo /><ListDemo/>
</template>
<template><h3> 列表渲染 </h3><div><p v-for="item in names"> {{ item }} </p></div>
</template><script>
export default {data(){return{names:["A","B","C"]}}
}
</script>
复杂的数据
数组有两个参数，对象有三个参数，顺序不能修改
key通过v-bind绑定特殊的attribute，v-for希望绑定一个基础的值，比喻字符串或数字
<template><h3> 列表渲染 </h3><p v-for="(item,index) in names" :key="index"> {{ item }} - {{index}}</p><h3> new </h3><div v-for="(item,index) in result" :key="index"><p> {{ item.id }} </p><p> {{ item.title }} </p><img :src="item.avator" alt=""></div><div><p v-for="(item,key,index) of userInfo" :key="index"> {{ item }} - {{ key }} - {{ index }}</p></div>
</template><script>
export default {data(){return{names:["test1","test2","test3"],result: [{"id": 1,"title": "eeds","avator": "https://profile-avatar.csdnimg.cn/c689d141563747f7af26b9d5d6ed2e43_weixin_41997073.jpg!1",},{"id": 2,"title": "ty","avator": "https://profile-avatar.csdnimg.cn/c689d141563747f7af26b9d5d6ed2e43_weixin_41997073.jpg!1",},],userInfo:{name:"iwen",age:20,sex:"男"}}}
}
</script>
也可以不使用默认的 index，直接用item的 ID 作为key。
推荐使用 of 不使用 in ，因为 of 更接近底层
<div v-for="item of result" :key="item.id">
)
