1)vue使用方式
1)cdn方式
该方式无需使用包管理工具,只要用script标签引入js文件即可,可以快速使用vue
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
2)创建vue项目
创建vue项目时需要nodejs环境,安装好nodejs后先为nodejs换一个国内镜像源以提升下载速度。
npm config set registry https://registry.npmmirror.com
接下来就可以创建项目了,首先移动到你要创建项目的目录下,执行如下命令
npm create vue@latest
之后跟着提示就可以创建一个vue项目了,不过启动项目还需要做如下操作:
首先移动到项目目录下
cd <your-project-name>
获取所有依赖
npm install
运行项目
npm run dev
2)vue的特性
1)组件化
创建好vue项目后打开index.html
可以发现这个页面引入了一个main.js,打开该文件后发现其引入了三个文件
其中打开app.vue发现
共引入了三个,RouterLink, RouterView, HelloWorld,且均在代码中出现。还能发现You did it!,修改为其他值后发现主页的数据也跟着变动了,可以断定这是主页的左半部分。将RouterView删除后发现页面少了一半,可以断定这是主页的右半部分。
打开HelloWorld所在的文件
可以发现msg正式上文中Helloword标签中的属性,且后三个红框的内容都是页面上存在的文字,此时不妨大胆猜测一下:我们将这段代码作为一个组件,命名为helloword,将在使用helloword时传入一个msg的属性得到显示效果,这个显示效果可以写在页面的任何位置。
为了验证我们的猜想,我们将<RouterView />也换成<HelloWorld msg="You did it!" />
至此我们发现了vue是组件化的,可以很方便的复用代码。它允许你将UI拆分成可复用的独立部分,并可以嵌套组合使用。每个Vue组件都包含自己的模板、逻辑和样式,vue项目正是由这一个个组件构成的
2)数据绑定
数据绑定是vue的一个重要特性,即数据到视图的双向绑定。当数据发生变化时,视图会自动更新;当视图中的表单元素被修改时,数据也会自动更新。省去了每次都要重新获取数据的步骤。下文将会详细讲解数据绑定的使用方法
3)基本语法
1)挂载
首先提取vue包
const {createApp} = Vue
然后调用createApp,并将这个函数挂载到#app这个元素上
createApp().mount("#app")
这样就将createApp挂载到了#app上,进行下一步操作
2)数据传递
为createApp()函数传入参数,参数是一个对象,用配置对象属性的方式配置该对象的内容,内有data(){}用于返回想要的数据,返回的数据是对象。还可以放一些方法等
<div id="app">我是{{person.name}},{{message}}</div>
<script>
const {createApp} = Vue
createApp({
data(){
return{
message:"v我50,让你当大将军",
person:{
name:"秦始皇",
age:11,
gender:1
},
number1:10,
number2:5
}
},
methods:{
m1(num){
this.number1 = num
}
}
}).mount("#app")
</script>
3)页面接收数据
1)插值表达式
{{}}为差值表达式,可以放在被挂载元素的任何位置,内部放变量名。
<div id="app">我是{{person.name}},{{message}}</div>
这段代码的显示效果是我是秦始皇,v我50封你做大将军。
差值表达式的功能非常强大,它可以方便的对数据进行各种操作,如下
{{person. Gender==1?"男":"女"}}<br>
<label for="">{{number1}}/{{number2}}=</label><label for="">{{number1/number2}}</label><br>
<label for="">欢迎语=</label><label for="">{{message.toLowerCase()}}</label><br>
2)数据绑定
在标签内不能使用插值表达式,但是可以使用数据绑定,使用方式是将v-bind添加到属性前面。v-bind可省略,只留一个冒号。
<input type="text" v-bind:value="message">
<input type="text" :placeholder="message">
3)双向数据绑定
使用v-model:属性,默认绑定value,当value属性发生变化时script中的值随之改变。
<input type="text" v-model:="message">
4)事件绑定
绑定事件现在的写法有所变化,使用@或v_on:事件名="函数名(参数列表)"如果无参数则无需括号。
<button type="button" @click="m1">按钮</button>
如果点击这个按钮则带有v-model属性的标签值会自动更新