Vue.js学习笔记（一）

最新推荐文章于 2022-11-27 20:44:52 发布

VIP文章 greenhand coder

最新推荐文章于 2022-11-27 20:44:52 发布

阅读量303

点赞数 1

分类专栏：前端学习笔记文章标签： vue js javascript 前端

本文链接：https://blog.csdn.net/qq_43249043/article/details/106172030

版权

1.vue是渐进式的框架

可以在原来用jQuery写的项目新开一个页面用vue写，以前的页面慢慢把以前jQuery项目的代码去除掉，可以不全部重构

2.Vue响应式

修改后台的数据页面也会渲染修改后的数据

<body>
    <div id="app">{
   {
   message}}</div>
    <script src="../js/vue.js"></script>
    <script>
        const aaa = new Vue({
   
            el:"#app",
            data:{
   
                message:"hello,guys"
            }
        })
    </script>
</body>
//<div id="app">可以随时更改，在console界面输入aaa.message='666'就可以
//类似小程序数据绑定

3.Vue列表的响应式

<body>
    <div id="app">
        <ul>
            <li v-for = "item in movies">{
   {
   item}}</li>
        </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const aaa = new Vue({
   
            el:"#app",
            data:{
   
                message:"hello,guys",
                movies:["第一个电影","第二个电影","第三个电影"],
            }
        })
    </script>
</body>

效果如图，自动for循环，和wx:for像
在这里插入图片描述

4.写个计数器

<body>
    <div id="app">
        <h2>counter={
   {
   counter}}</h2>
        <button v-on:click="add">+</button>
        <button v-on:click="sub">-</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const aaa = new Vue({
   
            el:"#app",
            data:{
   
                counter:0
            },
            methods:{
   
                add:function () {
   
                    console.log("add");
                    this.counter++;
                },
                sub:function () {
   
                    console.log("sub");
                    this.counter--;
                }
            }
        })
    </script>
</body>

鼠标点击“+”counter计数，类似小程序bindtap
结果：
在这里插入图片描述

5.Vue的MVVM

在这里插入图片描述
View（我们肉眼看到的视图层）通过DOMListener监听视图层发生的事件（点击、滚动、touch等），可以监听到需要的data传给Model（数据层）。Model通过DataBindings（数据绑定）将Model的改变实时传给View
第四点计数器的MVVM：

Vue实例就是Viewmodel,官方给Vue命名都是用var vm = new Vue({}),vm (ViewModel 的缩写) ,它能够解析js里面的数据发送到视图层，又可以解析dom里面的操作再调用js里面的函数

6.js中函数与方法的区别

当函数在类里面，函数叫方法。当函数在类外面，叫函数
函数：
在这里插入图片描述
方法：上一点的add sub就是

7.Mustache语法（双大括号语法）（图片侵删）

可以写简单表达式，变量

8.v-once语法

该指令表示元素和组件只渲染一次，不会随着数据的改变而改变

<body>
    <div id="app">
        <h2>{
   {
   message}}</h2>
        <h2 v-once>{
   {
   message}}</h2>
    </div>
        <script src="../js/vue.js"></script>
        <script>
            const aaa = new Vue({
   
                el:"#app",
                data:{
   
                    message:"hello,guys",
                }
            })
        </script>
</body>

效果如下，v-once作用下的标签不可再被渲染
在这里插入图片描述

9.v-html

类似innerHTML

<body>
    <div id="app">
        {
   {
   url}}
        <h2 v-html = 'url'></h2>
    </div>
        <script src="../js/vue.js"></script>
        <script>
            const aaa = new Vue({
   
                el:"#app",
                data:{
   
                    message:"hello,guys",
                    url:'<a href = "www.baidu.com">baidu</a>'
                }
            })
        </script>
</body>

效果如下，将string中的html解析出来并渲染
在这里插入图片描述

10 v-cloak（斗篷）

作用：防止浏览器显示未编译的Mustache，vue编译后才在页面上显示
用法：

<style>
    [v-cloak]{
   
        display: none;
    }
</style>
<body>
    <div id="app" v-cloak>
            {
   {
   message}}
    </div>
        <script src="../js/vue.js"></script>
        <script>
        // vue解析前，div有v-cloak属性
        // vue解析后，div没有v-cloak属性，配合css使用取消闪烁
            setTimeout(

最低0.47元/天解锁文章

greenhand coder

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js学习笔记（一）

1.vue是渐进式的框架：可以在原来用jQuery写的项目新开一个页面用vue写，以前的页面慢慢把以前jQuery项目的代码去除掉，可以不全部重构2.Vue响应式<body> <div id="app">{{message}}</div> <script src="../js/vue.js"></script> <script> const aaa = new Vue({
复制链接

扫一扫