Vue.js学习笔记入门语法篇

最新推荐文章于 2021-10-11 15:52:15 发布

莫莫绵

最新推荐文章于 2021-10-11 15:52:15 发布

阅读量352

点赞数 1

分类专栏：前端技术知识文章标签： js vue 前端

本文链接：https://blog.csdn.net/qq_36428889/article/details/102679077

版权

前端技术知识专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue.js学习笔记入门语法

Vue.js

Vue是一个渐进式的框架，他可以作为你应用的一部分嵌入进来。

特点：

1、实现视图和数据之间的解耦
2、可复用组件
3、前端路由技术
4、状态管理
5、虚拟DOM

安装：

官网安装教程

三种安装方式：

1、CDN引入（CDN：内容分发网络）

<!--以下选一个即可-->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!--其他版本-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>

这种方式的特性：在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。如果用户已经加载过，会从缓存中加载，这样可以减少加载时间。但是如果没有，那么第一次加载速度可能慢。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

学习或开发阶段时候使用会慢，因为测试是在本地测试的。因此开发时不要使用这种。

2、直接下载引入：选择开发或生产版本下载即可（如果点击直接打开可以右键另存为）
3、NPM方式：以后再看

语法与实践

学习暂时安装采用第二种、创建个目录将下载的vue.js放进去，随便选个IDE打开即可。
如果是java后端开发程序员，就用intelliJ IDEA吧，插件中下载Vue.js安装即可。
调试：谷歌或者火狐浏览器可以安装插件：Vue.js devtools。方便调试。
在这里插入图片描述

接下来再写个html，里面引用vue.js即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>

<div id="top"> {{hello}} </div>

<script src="../js/vue.js"></script>
<script>
    //这边const是es6的语法，let表示变量、const表示常量
     const myVue=  new Vue({
            el:'#top', //用于挂载要管理的元素
            data:{ //定义数据
                hello:'欢迎来到实力至上主义课堂'
            }
        })
</script>
</body>
</html>

先拿出一个Vue对象出来看看，上面id=top的div 已经被myVue管理了，那么{{}}里面的东西就会被解析成Vue的设定值，完成渲染。

这种编程范式叫:声明式编程。

并且这里的数据是动态的更新的。

MVVM框架

上述例子中

M：data:{ hello:'欢迎来到实力至上主义课堂' } 用来保存每个页面的数据

V：<div id="top"> {{hello}} </div> 显示

VM调度者为：myVue对象

解决{{}}表达式的闪烁问题

这时候我们如果网速慢加载完vue.js之前就会先看到{{hello}}显示了出来。

这是我们可以使用 v-cloak 如下：再css中定义下标记为v-cloak的就显示为隐藏。

这样可以解决这个插值表达式的闪烁问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="top">
<p v-cloak> {{hello}} </p>
</div>
<script src="../js/vue.js"></script>
<script>
    //这边const是es6的语法，let表示变量、const表示常量
    let myVue=  new Vue({
        el:'#top', //用于挂载要管理的元素
        data:{ //定义数据
            hello:'欢迎来到实力至上主义课堂'
        }
    })
</script>
</body>
</html>

看以下代码，学指令：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="top">
<p v-cloak> {{hello}} </p>
    <p v-text="hello"></p>
    <p v-html="hi"></p>
    <input type="button" value="按钮" :title="buttonTitle+'haah'" v-on:click="sout">
</div>
<script src="../js/vue.js"></script>
<script>
    //这边const是es6的语法，let表示变量、const表示常量
    let myVue=  new Vue({
        el:'#top', //用于挂载要管理的元素
        data:{ //定义数据
            hello:'欢迎来到实力至上主义课堂',
            hi:'<p>hi</p>',
            buttonTitle:'查询'

        },
        methods:{
            sout:function (){alert('haha')}
        }
    })
</script>
</body>
</html>

使用v-text

输出是一样的，但上面两种是有区别的。

1、首先v-text没有上述插值表达式的闪烁问题。
2、{{}}前后可以放别的内容，而v-text会覆盖原本p里面的内容
使用v-html

可以将和v-text差不多，但是会将内容按照html输出。

使用v-bind

html的特性是无法拿到data里面的值的，需要v-bind帮忙，如上图的button按钮中的title就不能直接拿到data里hi的值，这时要添加v-bind即可。可以用简写形式： (就是这个冒号：)

    <input type="button" value="按钮" v-bind:title="buttonTitle+'haah'">
    <input type="button" value="按钮" :title="buttonTitle+'haah'">

这里面可以用+‘’添加其他你想加的值，里面用单引号。

使用v-on

用于事件上，可以在Vue里面使用method实现方法，然后在用v-on绑定事件调用方法。

缩写方式@

 <!-- 完整语法 --><a v-on:click="doSomething">...</a>
<!-- 缩写 --><a @click="doSomething">...</a>

事件修饰符

修饰符	含义
.stop	阻止冒泡：如子父节点都存在点击事件时，在子节点使用 @click.stop = “事件方法名”，这样点击子节点位置就可以阻止父节点的事件发生。
.capure	捕获机制，如点击事件时，在父节点上加上，点击子节点内容时会先执行父节点的事件
.prevent	阻止默认行为：如a标签点击时不想它跳转，而是执行别的函数，此时使用@click.prevent=‘’
.self	只当事件在自身时才触发，如果点击他的子节点，此节点不会执行，相当于阻止了冒泡，但是仅仅阻止了此节点，其他冒泡的节点继续冒泡。
.once	事件处理只触发一次

v-model 双向数据绑定

	<h2 id="top-mar" >{{title}}</h2>
    <input type="text" v-model:value="title" style="width: 600px" title="请输入标题">

实现双向的数据绑定，这样用户输入的也可以动态取得页面中。

在vue中使用样式

1、calss属性绑定，直接传递数组，还可以使用三元表达式

简略代码：

或者

<h2 id="top-mar" :class="['color',{'font-size':sizeFlag}]" >{{title}}</h2>
 data:{ //定义数据
            title:'欢迎来到实力至上主义课堂',
            sizeFlag:false
        }

推荐使用对象的方式代替三元表达式

<h2 id="top-mar" :class="cssObject" >{{title}}</h2>
  data:{ //定义数据
            title:'欢迎来到实力至上主义课堂',
            cssObject:{color:true,fontSize:false}
        }

内联方式：

<h2 id="top-mar" :style="css">{{title}}</h2>
 data:{ //定义数据
            title:'欢迎来到实力至上主义课堂',
            css:{color:'red','font-size':'11px'}
        }

使用v-for

 <p v-for="item in list">{{item}}</p>
拿到索引值： <p v-for="(item,i) in list">{{i}}+++++{{item}}</p>
 data:{ 
            list:[1,2,3,4,5,6,7,8]
      }

遍历对象属性：

  <p v-for="(val, key) in user">值是：{{val}}-------键是{{key}}</p>

data:{ 
          user:{
              id:1,
              name:'haha'
          }
      }

遍历数字
<p v-for="count in 10">{{count}}</p>

遍历对象时，除了（val,key）,后面还可以拿到索引值(val, key,i)

以下有一个例子，里面使用了:key=“item.id”，就是设定一个绑定的主键，保证唯一绑定，注意：这个v-for使用的时候key属性只能用number获取string。通常我们必须指定这个key。

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <style>
        [v-cloak]{
            display: none;
        }
        #top{
            width: 600px;
            border-radius:5px 5px 5px 5px;
            border:1px solid #C92027;
            height:800px;
            margin:0 auto;

        }
       
    </style>
</head>
<body>
<div id="top">
    <div>
        <label  >ID:
            <input type="text" v-model="id">
        </label>
        <label  >姓名:
            <input type="text" v-model="name">
        </label>
        <input type="button" value="添加" @click="add">
    </div>


    <p v-for="item in userList" :key="item.id">
        <input type="checkbox" >
        {{item.id}}------
        {{item.name}}
    </p>
</div>
<script src="../js/vue.js"></script>
<script>
    let myVue=  new Vue({
        el:'#top',
        data:{ 
            id:0,     //注意这里要初始化
            name:'',
            title:'欢迎来到实力至上主义课堂',
            userList:[{
                id:1,
                name:"二狗"
            },{
                id:2,
                name:"三猫"
            },{
                id:3,
                name:"六虎"
            },{
                id:4,
                name:"七马"
            }]
        },
        methods:{
            add(){
                this.userList.unshift({id:this.id,name:this.name})
            }
        }
    })
</script>
</body>
</html>

使用v-if和v-show

v-if 确实移除或创建了元素，切换性能高一点，频繁切换不要用这个，如果if判断出结束后永远都不会再显示它，可以用v-if。

v-show 只是显示或不显示，不会重新删除和增加DOM操作。初始渲染消耗高。

    <p v-if="flag">if</p>
    <p v-show="flag">show</p>
 data:{ 
            flag:false,
        }

Axios异步通信框架

作用：实现ajax异步通信。
Axios学习文档：点击进入

使用

CDN引入：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>


<div v-cloak id="vue">
    <div >名称：{{info.name}}</div>
    <div >地址：{{info.address.country}}-{{info.address.city}}-{{info.address.street}}</div>
    <div >链接：<a v-bind:href="info.url" target="_blank">{{info.url}}</a> </div>
    <ul>
        <li v-for="link in info.links">
            {{link.name}} - {{link.url}}
        </li>
    </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
let vm = new Vue({
    el:"#vue",
    data(){
        return{
            info:{
                name: null,
                address:{
                    country:null,
                    city:null,
                    street:null
                },
                url:null
            }
        }
    },
    mounted(){
        axios
            .get('data.json')
            .then(response =>(this.info = response.data));

    }
});

</script>
</body>
</html>

这个世界有成千万种爱，没有哪一种可以重来。

莫莫绵

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js学习笔记入门语法篇

Vue.js学习笔记第一天Vue.js特点：安装：语法与实践MVVM框架解决{{}}表达式的闪烁问题使用v-text使用v-bind使用v-on事件修饰符v-model 双向数据绑定在vue中使用样式使用v-for使用v-if和v-showVue.jsVue是一个渐进式的框架，他可以作为你应用的一部分嵌入进来。特点：1、实现视图和数据之间的解耦2、可复用组件3、前端路由技...
复制链接

扫一扫