语法
- {{}} 变量、表达式渲染
- v-html html模板，渲染html
- v-model 绑定值（双向绑定）
- v-if 判断
- v-bind 简写 : 绑定属性
- v-on 简写 @ 绑定事件
- v-for 循环
- 动态class style
测试效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue学习</title>
<style>
.active { color: red}
</style>
</head>
<body>
<div id="app">
{{ message }}
{{ message2 }}
<div>
<input type="text" v-model="message3">
<div>{{ message3 }}</div>
</div>
<div>{{ num+1 }}</div>
<div>{{ bool }}</div>
<div>{{ bool ? 'a' : 'b' }}</div>
<div>{{ arr.find(v => v.name==='张三')?.age }}</div>
<div v-html="htmlStr"></div>
<div>
<input type="text" v-model="value">
<div>{{ value }}</div>
</div>
<div>
<div v-if="color === 'red'">这是红色</div>
<div v-else-if="color === 'blue'">这是蓝色</div>
<div v-else>这是其他色</div>
</div>
<div>
<a :href="url">搜索一下</a>
</div>
<div style="width: 100px; height: 100px; background-color: red" @click="clickDiv" id="div"></div>
<div>
<div v-for="(item,index) in users" :key="index">{{ (index+1) + '=====' + item.name }}</div>
</div>
<div style="display: flex; margin-top: 20px">
<select v-model="currentMenu">
<option value="首页">首页</option>
<option value="教师">教师</option>
<option value="学生">学生</option>
</select>
<div style="padding: 0 10px" :style="{fontSize : item === currentMenu ? '20px' : '18px'}"
:class="{'active' : item === currentMenu}" v-for="(item,index) in menus" :key="index">{{ item }}</div>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, ref } = Vue
createApp({
data() {//vue2的方式
return {
message2 : 'aaa',
message3 : 'bbb'
}
},
setup() {//vue3推荐方式
const message = ref('Hello vue!')
const num = 1
const bool = false
let arr = [ {name: '张三', age: 23} ]
let htmlStr = '<strong style="color: red">渲染html测试</strong>'
let value = ref('')
let color = ref('red')
let url = 'https://www.baidu.com'
let users = [{name: '张三', age:22},{name: '李四', age:22},{name: '王五', age:22}]
let menus = ['首页','教师','学生']
let currentMenu = ref('首页')
return {
message,
num,
bool,
arr,
htmlStr,
value,
color,
url,
users,
menus,
currentMenu
}
},
methods: {
clickDiv() {
console.log('我点击了div')
let color = document.getElementById('div').style.backgroundColor
document.getElementById('div').style.backgroundColor = color === 'blue' ? 'red' : 'blue'
}
}
}).mount('#app')
</script>
</body>
</html>
Vue项目创建
1.vue.js官网学习vue的语法等知识，有html、css、JavaScript基础。
vue官网：https://cn.vuejs.org
2.下载node.js，使用其中的npm包管理工具构建vue项目，npm管理依赖，类似maven，node-v查看版本，建议14以上
nodejs官网：https://nodejs.org/zh-cn/
3.cmd到项目路径下，npm -v检查npm版本，npm install -g @vue/cli，安装vue脚手架，vue create创建vue项目
配置选择
选择如下四个，取消Linter
vue版本选3.x
使用history mode，输入y
选择如下
保存配置，第一次可以y，已保存过可以n
创建成功日志
运行项目
启动成功日志
登录页面测试
ctrl+c，y，关闭运行的项目
4.vue项目开发使用idea，也可使用vscode，看习惯，vue项目文件夹拖到idea里启动即可，配置启动项
配置保存后，点运行，可快速启动项目
启动后自动跳转到页面配置
5.主要文件结构介绍，index.html入口html文件包括了根元素，assets静态资源，components组件，router路由，store页面变量，views视图（页面级组件），App.vue根组件，main.js项目入口文件实例化Vue应用，package.json依赖配置文件，node_modules依赖的第三方库
6. 改造项目-App.vue、Home.vue、Header.vue、css
删除src/components/HelloWorld.vue
创建src/components/Header.vue
改造App.vue
改造HomeView.vue
创建src/assets/css/global.css
改造后效果
