环境的安装
一般编写Vue代码会使用visual studio code 直接谷歌安装一下就行，建议visual studio code安装插件 “open in browser” 可以写完了代码直接右键去浏览器看写出来的代码运行
环境依赖管理:NPM
项目构建:VueCli
Vue的hello world
<!DOCTYPE html>
<html>
<head>
<title>Vue 3 示例</title>
<!-- 引入Vue 3库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.21/dist/vue.global.min.js"></script>
</head>
<body>
<div id="app2">
<h1>{{ testMessage}}</h1>
</div>
<script>
// 创建VM对象
const vm1 =
{
data: function () {
return {
helloMessage: 'helloworld',
testMessage: 'heyhey'
}
}
}
app2 = Vue.createApp(vm1);
//vm对象与id为app2的元素绑定
app2.mount("#app2");
</script>
</body>
</html>
Vue对代码编写的格式有要求，尽量写完代码之后format一下。
Vue之中的属性绑定
可以使用冒号进行属性的绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<div id="app2">
<a :href="link">百度</a>
<input type="text" :placeholder="inputValue">
<img :src="imgSrc" :style=" {width:w}" alt="">
</div>
<script>
const vm1 = {
data() {
return{
link : "http://www.baidu.com",
inputValue: "请输入内容",
imgSrc: './images/demo.png',
w : '500px'
}
}
}
const app2 = Vue.createApp(vm1)
app2.mount('#app2')
</script>
</body>
</html>
Vue之中可以使用js表达式
<p>{{number + 1}}</p>
<p>{{ok ? 'True' : 'False'}}</p>
<p>{{message.split('').reverse().join('')}}</p>
<p :id="'list-' + id">xxx</p>
<p>{{user.name}}</p>
Vue之中可以使用@符号来进行事件绑定
<div id="app">
<h3>count 的值为：{{count}}</h3>
<button v-on:click="addCount">+1</button>
<button @click="count+=1">+1</button>
</div>
<script>
const vm1 = {
data(){
return {
count: 0,
}
},
methods:{
addCount(){
this.count += 1
},
}
}
</script>
Vue之中可以使用v-if进行条件渲染
<p v-if="flag">请求成功 --- 被 v-if 控制</p>
<p v-show="flag">请求成功 --- 被 v-show 控制</p>
扫一扫
10万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
