Vue入门

lu__lala

已于 2022-04-18 18:03:14 修改

阅读量571

点赞数

文章标签： vue

于 2022-04-14 17:11:22 首次发布

本文链接：https://blog.csdn.net/lu__lala/article/details/124175521

版权

Vue.js

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。

一.导入

概述：Vue是一个类似于Jquery的一个JS框架，所以，如果想使用Vue，则在当前页面导入Vue.js文件即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>

二.插值表达式

 <div id="app">
        <!--插值表达式：{{}}-->
        {{content}}
        {{age}}
        {{1+2}}
        {{[1,2,3,4][2]}}
        {{{"name":"千玺","age":20}.age}}
</div>

 <script>
            //vue对象 所有关于页面的操作 都要基于vue对象内部去搞
            new Vue({
                el:"#app",//作用在谁身上 只在范围内生效
                data:{
                    title:"我是vue",
                    content:"内容",
                    age:18
                }
            });
        </script>

结果：

三.数据双向绑定数据(v-model)

1.双向绑定

      <!--双向-->
        {{title}}
        <input type="text" v-model="title ">
      
      <script>
        
            new Vue({
                el:"#app",
                data:{
                    title:"我是vue"  
            }
            });
        </script>

当值发生改变时两边数据都会发生改变，效果如下：

2.单项绑定

一方发生改变另外一方不会有任何变化

   <!--单向-->
   {{title}}
   <input type="text" :value="title ">

 
      <script>
        
            new Vue({
                el:"#app",
                data:{
                    title:"我是vue"  
            }
            });
        </script>

四.事件绑定

Vue支持html中所有已知事件. 如: @click, @submit等, 只不过事件的名字不带on

<button @click="test2()">点我弹框</button>

 <script>
          
            new Vue({
                el:"#app",
                data:{
                    title:"我是vue",
                    content:"内容",
                    age:18,
                    url:"http://www.baidu.com",
                    num:0,
                    color:"red"

                },
            //定义vue的方法
            methods:{ 
                test2:function () {
                   alert("!!!!")
                }
               }
            });
        </script>

结果：

五.绑定属性

属性前加上“：”即可

     <a :href="url">点点点</a>

  
    <script>
                
     new Vue({
                el:"#app",
                data:{ 
                    url:"http://www.baidu.com"  
                }
            });
        </script>

计数器案例：

 <button @click="jia()">点我加加</button>
        <h3 v-html="num"></h3>


   <script>
            
            new Vue({
                el:"#app",
                data:{
                    num:0

                },
            methods:{  
                jia:function () {
                   this.num++;
                }
            }
            });
        </script>
</html>

结果：

点击后：

六.Vue组件

组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
<div id="app">
  <my-first></my-first><!--自定义组件-->

</div>

<div id="app2">
   <my-two></my-two>
</div>
</body>
<script>
    //1.new Vue  2.注册一个组件
  var my={
      //注册一个组件data的声明只能用return的形式
      //在第二种方式中 data不再是一个属性 而是一个方法
      data(){
          return {
              str: "阿西吧"
          }
      },
      //定义组件长什么样子 定义组件的模版
      template:"<h1>我是my-first的h1<span>{{str}}</span><button @click='test'>点我</button></h1>",
      methods: {
          test:function () {
              alert("我是组件中的test方法")
              this.str="嘻嘻嘻"
          }
      }
  };

  new Vue({
      el:"#app",
      components:{
          "my-first":my
      }
  })

    new Vue({
        el:"#app2",
        components:{
            "my-two":my
        }
    })
</script>
</html>

注意：

组件的模版中, 只能书写一个跟标签
组件的定义必须放在Vue创建对象之前, 否则报错

结果：

点击后：

MVVM
第三者 监视者
监视者能够观察到双方数据的变化，并对视图对应的内容进行更新
监视者能够监听到双方数据的变化，并能够通过脚本层中的数据发生变更
vue.js只是一个MVVM模型的最佳实现者之一

vue可以随便使用js代码  js\html不可以随意调用vue内容

为什么vue这么优秀
1.体积小 vue.jsp压缩之后的大小只有20k
2.移动优先级高，更适合移动端
3.易上手
4.开源

lu__lala

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门

Vue.jsVue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。[5]与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。一.导入...
复制链接

扫一扫