vue入门笔记一

最新推荐文章于 2022-12-01 14:33:27 发布

少说废话放码过来

最新推荐文章于 2022-12-01 14:33:27 发布

阅读量226

点赞数

分类专栏： vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_37221709/article/details/79062984

版权

vue学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

基本认知

读音：view的读音 v-u-e

作者：尤雨溪

Vue是什么？
一个MVVM框架，和angular类似
官网：https://cn.vuejs.org/

开发模式：
MVC ：（struts）这个是咱们开发模式的一个鼻祖，Model（模型）、View（视图）、Control（控制器），这个模式源于Java开发；

后来前端也出现了MVC架构，再往后就演变为了现在的MVVM，MV*
MVVM：Model-View（视图）-ViewModel(没有Control)
MV* ：

vue

第一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!--
需要注意，Vue里面的标签和模板在Vue.js文件加载完之前，他们是没有渲染的，也就是说他们在未渲染之前是按照我们代码的格式原封不动的输出的
-->
<div id="app">
    {{ message }}
</div>
<script src="vue.js"></script>
<!--
    Vue.js是一套为了解决数据渲染的框架
-->
<script>
//通过new得到一个Vue的实例
new Vue({
  //ID：#
  el: '#app',//element:元素，这里表示我们需要渲染的元素位置
  data: { //需要操作的数据，这个数据可以是数组、对象、变量等等类型
    message: 'Hello Vue!'//Vue的一个数据对象
  }
});
</script>
</body>
</html>

指令

    <div id="app-2">
        <!--
            v-bind：是vue的绑定指令
            这里v-bind:title绑定的是title值
        -->
        <span v-bind:title="message">
            message鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
    </div>
    ...
    <script src="vue.js"></script>
    <script>
        var app2 = new Vue({
            el: '#app-2',
            data: {//所有渲染的数据都在data中展示
                message: '页面加载于 ' + new Date().toLocaleString()
            }
        });
    </script>

Vue的指令都会有一个v-开头，表示vue的指令

Vue指令：他们都在加载页面之后，不会显示指令，指令只是会执行Vue相对应的操作;

v-bind:title：绑定元素的title属性
v-if：表示显示或不显示(不显示则直接移除)，值为boolean
v-show：表示显示或隐藏，值为boolean
使用v-show时需要注意，不能用样式去控制，因为v-show的指令只能控制style里面的值变化，而不能控制css样式 (css会覆盖ta而无法操作)
v-for：循环，语法(item in arr)
v-model：绑定input输入框的value值
v-on:click：绑定click点击事件，也可以使用@click替代，一般情况下我们更提倡简写 @click= "myclick"
v-bind:class：可以简写为”:class”，v-bind就是绑定:
:class = "[class1,class2]"
:class = "{red:true} true 可以是一个变量 red是一个css类（class）

少说废话放码过来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue入门笔记一

基本认知读音：view的读音 v-u-e作者：尤雨溪Vue是什么？一个MVVM框架，和angular类似官网：https://cn.vuejs.org/开发模式： MVC ：（struts）这个是咱们开发模式的一个鼻祖，Model（模型）、View（视图）、Control（控制器），这个模式源于Java开发；后来前端也出现了MVC架构，再往后就演变为了现
复制链接

扫一扫