Vue第一天学习总结

最新推荐文章于 2023-07-09 20:04:24 发布

正经男大学生BRLF

最新推荐文章于 2023-07-09 20:04:24 发布

阅读量375

点赞数

分类专栏：前端框架

本文链接：https://blog.csdn.net/u011554976/article/details/89504945

版权

前端框架专栏收录该内容

12 篇文章 1 订阅

订阅专栏

Vue第一天学习总结

1、环境引入

目前简单的学习语法阶段只引入一个vue.js就可以了，引入方式和正常的js文件引入没有区别

<script src="lib/vue.js"></script>

2、开始使用

vue中是MVVM渲染方式，M就是Model数据，V就是view页面，VM就是viewModel，相当于控制器，控制M和V的交互。引入Vue.js后全局对象中就会出现一个Vue对象，实例化一个vue实际上就是实例化了一个vm，指定相应的元素和数据即可实现页面渲染。

var vm = new Vue({
    el:'#绑定的元素id',
    data:{
        msg:'这里是一条数据，数据名叫msg'
    },
    methods:{
        方法名(){
           	//这里是一个方法，比如onclick的事件触发的方法等等，此种写法采用ES6的写法，也可以通过箭头函数来继承this指针。
        }
    }
})

3、几种用法

v-cloak:防止闪屏，当数据没有被渲染时可以按照v-cloak规定的样式隐藏等等，数据渲染后该属性对应样式消失
{{}}:插值表达式，可以通过插值表达式来直接给元素渲染数据
v-text:和thymeleaf中的th:text类似，功能和插值表达式相同，可以理解成th:text和[[${}]]的区别
v-html:和thymeleaf中的th:utext类似，可以将内容以html的方式显示
v-bind:绑定元素的属性，类似th:的功效，可以省略成一个冒号
v-on:绑定元素的事件，可以省略成一个@符号
v-model:形成数据的双向绑定，但是只作用在表单元素中

4、案例代码

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的第一个vue页面</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <!--
            v-cloak可以解决闪烁问题，使用v-cloak后，当msg没有渲染完成时，会按照我们指定的样式（display：none）
            显示，渲染完成后v-cloak消失
        -->
    <div id="myApp">
        <p v-cloak>{{msg}}</p>
        <p v-text="msg"></p>
        <!--
            默认v-text没有闪烁问题
        -->
        <p v-html="htmlmsg"></p>
        <input type="button" value="绑定title的按钮" v-bind:title="mytitle+'v-bind内容是个表达式哦'">
        <input type="button" value="绑定title且简写v-bind的按钮" :title="mytitle+'v-bind简写'" @click="show">
        <input type="text" v-model="msg">
    </div>


    <script src="lib/vue.js"></script>
</body>
<script>
    var vm = new Vue({
        el: '#myApp',
        data:{
            msg:'刘凡的第一个vue实例',
            htmlmsg:'<h1>刘凡的h1</h1>',
            mytitle:'刘凡的标题'
        },
        methods: {
            show:()=>{
                alert("hello");
            }
        }
    })
 

</script>

</html>

5、效果截图

正经男大学生BRLF

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue第一天学习总结

Vue第一天学习总结1、环境引入目前简单的学习语法阶段只引入一个vue.js就可以了，引入方式和正常的js文件引入没有区别<script src="lib/vue.js"></script>2、开始使用vue中是MVVM渲染方式，M就是Model数据，V就是view页面，VM就是viewModel，相当于控制器，控制M和V的交互。引入Vue.js后全局对象中就...
复制链接

扫一扫