Vue常用语法
- {{ }} 变量、表达式渲染
{{ }} 用于输出对象属性和函数返回值
<div id="hello-vue" class="demo">
{{ message }}
</div>
<script>
const HelloVueApp = {
data() {
return {
message: 'Hello Vue!!'
}
}
}
Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
mount('#hello-vue') 将 Vue 应用 HelloVueApp 挂载到 <div id="hello-vue"></div>
{{ message }} 对应应用中 message 的值
- v-html html 模板，渲染 html
用于输出 html 代码
<div id="hello-vue" class="demo">
<span v-html="rawHtml"></span>
</div>
<script>
const HelloVueApp = {
data() {
return {
rawHtml: '<span style="color: red">这里会显示红色！</span>'
}
}
}
Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
- v-model 绑定值（双向绑定）
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值
- v-bind 简写 : 绑定属性
<style>
.class1 {
background: #444;
color: #eee;
}
</style>
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br/><br/>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
</div>
<script>
const app = {
data() {
return {
use: false
}
}
}
Vue.createApp(app).mount('#app')
</script>- v-on 简写 @ 事件绑定
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
const app = {
data() {
return {
message: 'XIAOQIANWOAINI!'
}
},
methods: {
reverseMessage() {
this.message = this.message
.split('')
.reverse()
.join('')
}
}
}
Vue.createApp(app).mount('#app')
</script>
- v-if 和v-for
v-if用于根据表达式的真假条件来控制元素的显示与隐藏。- 当表达式为真时，元素会被渲染到 DOM 中；当表达式为假时，元素不会被渲染到 DOM 中。
<div v-if="isVisible">
This element is visible
</div>
v-for用于基于源数据多次渲染元素或模板块。- 通过遍历数组或对象的属性来生成对应数量的元素。
<ul>
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</ul>Vue项目结构
刚打开的空项目运行后的结构：
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
|
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，可以添加一些 meta 信息或统计代码。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |
实际完成后项目的src结构：
views:写各种页面
router:初始状态下有两个路由，/,about
components:存储组件
main.js入口，整个组件挂载到app元素上
注：后端渲染与前端渲染：
后端渲染：每打开一个页面，服务器发送请求并且返回回来
前端渲染；只有在第一次打开（无论是什么页面），服务器将所有元素返回，同时打包在js文件中，当打开第二个或第三个等页面后，用返回的js文件直接将新页面渲染出来
