发布时间：2025-12-09 14:14:15 浏览次数：3
Vue是一个开源的javascript框架，并且Vue支持mvc和mvvm两种模式。
Vue是一个构建数据驱动的 web 界面的渐进式框架。采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，是又一个js库。
MVC：Model(模型),View(视图),Controller(控制器)
1.轻量：Vue.js库的体积非常小的，并且不依赖其他基础库。
2.数据绑定：对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。
3.指令：内置指令统一为(v-指令)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。
4.插件化：Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。
5.组件化：组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用
2.1 直接下载vue的就是文件，然后直接拷贝到项目中，即下载vue.js文件到你的项目中。
2.2 CDN：直接在文件上使用script标签引入js文件，这个直接使用vue官网提供的路径，只要你电脑有网就可以用，即在直接使用script标签引入：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>2.3 NPM：这个需要安装软件，在构建大型应用时使用
在下面的案例中我统一使用第一种方式
简单使用vue的三部曲：
3.1 引入vue的js文件
3.2 准备一个元素，可以使用任意标签，一般使用p
3.3 写js代码将上面的元素挂载起来
<body> <!--vue使用的步骤：①先导入js的文件--> <script src="vue/vue.min.js"></script> <!--②创建一个p,准备和vue的关系--> <p > { { msg}} </p> <!--③写js代码：然后与上面的p创建关系--> <script> //注意：下面的Vue的写法,写成vue就出不来 new Vue({ el:"#app", data:{ msg:"hello vue", } }) </script></body>el的功能是完成元素的挂载 ,
可以使用id选择器，class选择器，标签选择器，但是挂载只对第一个符合条件的元素起作用，所以vue推荐使用id选择器，id的值是唯一的
<body><!--①导入js文件--> <script src="vue/vue.min.js"></script> <!--②准备一个元素，用来绑定下面的vue--> <p > { { msg}} </p> <p > { { msg}} </p> <!--③写js代码，将上面的元素挂载 --> <script> new Vue({ // el:"#app", //使用的是id选择器，id唯一，只对对应的p有作用 // el:".appClass", //使用的是类选择器，只能显示一个，第二个没有效果 el:"p", //标签也是，上面两个p，网页只能显示一个有效果 data:{ msg:"hello vue...." } }) </script></body>data是数据元，主要用来准备数据的，在被挂载的元素里面可以通过vue的表达式直接取到data中的数据，可以是普通类型的数据，也可以是数组，对象，而且通过vue对象改变里面数据的值，在元素中取到的值也会跟着改变。
格式：
① data:{ } 里面可以写json格式的数据
② data(){
return {
}
}
这里将data当成函数，以返回值的形式返回数据，在return里面直接写json格式的数据
<body><!--1.导入js文件--> <script src="vue/vue.min.js"></script> <!--2.准备一个元素--> <p > { { msg}} ----- { { sex}} <br/> { { hobbies}} --- { { hobbies[0]}}<br> { { employee}} ---- { { employee.name}} --- { { employee.age}} </p> <!--3.写js代码，完成上面元素的挂载 --> <script> var vue = new Vue({ el:"#app", /*data:{ msg:"今晚月色真美", sex:true, hobbies:["唱","rap","篮球"], employee:{ name:"张三", age:68, } },*/ data(){ return { msg:"今晚月色真美", sex:true, hobbies:["唱","rap","篮球"], employee:{ name:"张三", age:68, } } } }) alert(0); vue.msg = "还好吧。。。"; </script></body>methods：就是方法，在里面可以定义多个方法，这个方法的调用有两种方式：
1）通过Vue对象调用这个方法
2）在被挂载元素中通过表达式调用这个方法
<script src="vue/vue.min.js"></script></head><body> <p > <!--直接在挂载元素中使用表达式调用方法--> { { msg}} { { name}} { { say()}} { { hello("真优秀")}} </p> <script> var vue = new Vue({ el:"#app", data:{ msg:"对不起，生而为人", name:"太宰治", age:35 }, methods:{ say(){ alert("王权富贵"); }, hello(msg){ alert(this.name+msg); //在这里改变name的值，上面的name值也会被改变 this.name = "王富贵"; } } }) //可以直接通vue对象调用这个方法 // vue.say(); </script></body>**{
{ }}**是Vue的表达式，里面代码的写法和js一样，是用来取值的
在表达式中可以进行四则运算，三目运算，数组，对象，字符串都可以直接操作
<body><script src="vue/vue.min.js"></script><p ><!--首先通过表达式可以直接取值-->{ { msg}} <br><!--表达式里面可以直接进行四则运算-->{ { 4+2}}{ { 4+"2"}} <!--如果+两边有字符串就是字符串的拼接-->{ { 4-2}}{ { 4*2}}{ { 4/2}}{ { num1/num2}}<br><!--表达式中可以进行三目运算-->{ { sex?"男":"女"}} <br><!--通过表达式操作字符串-->{ { name}} --- { { name.substr(1,3)}} --- { { name.substring(1,3)}}----{ { name.substring(1,3).toUpperCase()}} <br><!--通过表达式操作数组-->{ { hobbies}} --- { { hobbies[0]}} ---- { { hobbies.length}}<br><!--通过表达式操作对象-->{ { employee}} { { employee.name}}{ { employee.say()}}</p><script>var vue = new Vue({ el:"#app",data:{ msg : "以后不说脏话",num1:4,num2:4,sex:true,name:"dafsfegeg",hobbies:["唱跳","rap","篮球"],employee:{ name:"王五",age: 18,say(){ return "我是"+this.name;}}},})</script></body>| 指令名称 | 指令作用 | 备注 |
|---|---|---|
| v-html | 显示与解析HTML代码 | 等效与JS的innerHTML |
| v-text | 原封不动的展示 | 等效与JS的innerText |
| v-for | 遍历与循环功能 | 遍历数字，字符串,对象,数组 |
| v-bind | 绑定属性 | 简单形式 :属性名=“值” |
| v-model | 双向绑定 | 只支持input,select,textarea |
| v-show | 显示与隐藏 | 隐藏只是样式:style=“display=none” |
| v-if | 判断 | v-if/v-else-if/v-else是一组 |
| v-on | 绑定事件 | 简写形式 @事件名=方法名() |
1)、直接使用{
{}}表达式取值，会将内容原样输出
2)、v-html指令：可以解析里面的HTML标签，和innerHTML的用法一样
3)、v-text指令：只能将文本原样输出，和innerText的用法一样
<body><script src="vue/vue.min.js"></script><p ><span ></span> <br><span>{ { msg}}</span><br><span v-html="msg"></span><span v-text="msg"></span></p><script>//使用原生js的方式对span插入值document.getElementById("span").innerHTML = "<h3>我是一个p</h3>";new Vue({ el:"#app",data:{ msg:"<h1>我想带一人回云深不知处，带回去，藏起来</h1>"},methods:{ }})</script>v-for循环遍历，可以用来遍历Array、Object 、number 、string、Iterable。
语法：v in Object v是自定义的变量，Object是我们需要遍历的对象
1）遍历number数字：
就是普通的循环：for(var i=1;i<=数字;i++)
2）遍历String就是将字符串中的每一个字母都拿出来
3）遍历Object对象，v-for=”(v,k,i) in 对象”
v:代表对象的属性值
k:代表对象的属性名
i:代表索引
4）遍历Array数组，v-for=”(v,i) in 数组”
v:代表对象的属性值
i:代表索引
<body><script src="vue/vue.min.js"></script><p ><!--遍历数字：下面的v in num等效于 for(var i=1;i<=num;i++){ }--><ul><li v-for="v in num">{ { v}}</li></ul><!--遍历字符串：会将字符串中的字母一个个遍历出来--><ul><li v-for="v in name">{ { v}}</li></ul><!--遍历数组：会将字符串中的字母一个个遍历出来v,i 第一个参数v是具体的值，第二个参数i是该值对应的索引 --><ul><li v-for="(v,i) in hobbies">{ { v}}--{ { i}}</li></ul><!--遍历对象：v,k,i 第一个参数v是具体的值，第二个参数k是这个只对应的key，i是索引--><ul><li v-for="(v,k,i) in employee">{ { k}} -- { { v}}--{ { i}}</li></ul></p><script>new Vue({ el:"#app",data:{ num:5,name:"liqiao",hobbies:["唱跳","rap","篮球"],employee:{ name:"张三丰",age:18,},},})</script>v-bind是给被挂载的元素绑定属性，当是一个元素对象的时候，也可以直接绑定
语法：
v-bind:属性名=“值” ，值是定义的Vue中的data的数据
还有可以使用简写形式–> :属性名=“值”
<body><script src="vue/vue.min.js"></script><p ><img v-bind:src="srcVal" v-bind:height="heigth"/><img :src="srcVal" :height="heigth"><!--绑定一个对象:v-bind="值"，注意img中的数据src和会height会被绑定到属性上，所以必须和img的属性名一致--><img v-bind="img"/></p><script>new Vue({ el:"#app",data:{ srcVal:"timg.jpg",heigth:400,img:{ src:"timg.jpg",height:200,}},})</script></body>v-model：用于双向的数据绑定，只能用在input/select/textarea这三个标签上
<body><script src="vue/vue.min.js"></script><p ><input type="text" v-model="inputVal"/>{ { inputVal}}<hr>爱好：<input type="checkbox" value="1" v-model="checkboxVal" />看电影<input type="checkbox" value="2" v-model="checkboxVal" />打篮球<input type="checkbox" value="3" v-model="checkboxVal" />唱歌<input type="checkbox" value="4" v-model="checkboxVal" />看小说<br>{ { checkboxVal}}<hr>性别：<input value="1" v-model="radioVal" type="radio" />男<input value="2" v-model="radioVal" type="radio" />女<br/>{ { radioVal}}<hr><select v-model="selectVal"><option value="1">中国</option><option value="2">日本</option><option value="3">美国</option></select><br>{ { selectVal}}<hr><textarea v-model="textareaVal"></textarea><br>{ { textareaVal}}</p><script>new Vue({ el: "#app",data:{ inputVal:"人间失格",checkboxVal:["1","3"],radioVal:2,selectVal:2,textareaVal:"fhsaofhpweg"}})</script></body>v-on：事件绑定，给被挂载的元素绑定事件
语法：<标签名 v-on:事件名=方法名()>
简写形式：<标签名 @事件名=方法名() >
<body><script src="vue/vue.min.js"></script><p ><button v-on:click="say()">点我啊</button><button v-on:click="hello('是个渣男')">你在点我啊</button><button v-on:click="age++">{ { age}}</button></p><script>var vue = new Vue({ el:"#app",data:{ name:"张无忌",age:22,},methods:{ say(){ alert("点啊，你个瓜娃子");},hello(msg){ alert(this.name+msg);}}})</script></body>1）先创建组件再进行挂载
2）组件的template有且只有一个外部标签
3）组件取名如果是驼峰命名,使用-表示 例: MyTagHaha ->
语法：Vue.component(‘组件名’,{
template:” 里面写模板代码 “,
})
通过Vue定义的组件，就是一个全局的组件，在所有被挂载的元素里面都可以使用
注意：下面的组件名是myTag，然后在使用时候必须写才能识别
<body><script src="vue/vue.min.js"></script><p ><my-tag></my-tag></p><p ><my-tag></my-tag></p><script>Vue.component('myTag',{ template:"<p><h1>你今天开心吗？</h1><h3>开心啊</h3></p>",})new Vue({ el:"#app2",data:{ }})new Vue({ el:"#app",data:{ }})</script></body>局部组件是在定义的一个Vue对象里面定义的组件，在一个Vue对象中可以定义多个组件，所以使用的关键字是components
语法：new Vue({
el:”#app”,
components:{
“组件名”:{
template:” 在里面写模板代码 “
}
}
})
<body><script src="vue/vue.min.js"></script><p ><mytag></mytag></p><script>new Vue({ el:"#app",data:{ },components:{ "mytag":{ template:"<h1>我很爱国</h1>"}}})</script></body>vue的组件的使用，像下面这样使用template在里面写HTML代码不方便，如果代码量太多就不好写，所以有两种方式可以解决这个问题：
1）直接使用template标签，将模板中的代码直接写在template标签里面
2）使用script标签，设置type=“text/template”，然后在标签里面写模板中的代码
</head><body><script src="vue/vue.min.js"></script><p ><mytag></mytag></p><template ><form>姓名：<input type="text" placeholder="用户名" /><br>密码：<input type="password" placeholder="密码" /><br><button type="button" @click="say()">{ { msg}}</button></form></template><script>Vue.component('mytag',{ // template:"<p>我想去南极</p>>",template:"#form",data(){ return { msg:"点我啊"}},methods:{ say(){ alert("你好啊");}}})new Vue({ el:"#app",data:{ }})</script></body><body><script src="vue/vue.min.js"></script><p ><mytag></mytag></p><script type="text/template" ><form action="" method="post">名称：<input type="text" name="username"/><br>密码：<input type="password" name="pwd"/><br><button type="button">登录</button><br></form></script><script>Vue.component('mytag',{ template:"#myjstemp",})new Vue({ el:"#app",data:{ }})</script></body>免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流