vue.js 学习

最新推荐文章于 2023-12-16 00:00:00 发布

no_cloud

最新推荐文章于 2023-12-16 00:00:00 发布

阅读量208

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/clouderpig/article/details/84788305

版权

vue实现响应的数据绑定和组合的视图组件

参考资料：
Webpack 入门教程：http://www.runoob.com/w3cnote/webpack-tutorial.html
官方文档：http://vuejs.org/v2/guide/syntax.html
中文文档：https://cn.vuejs.org/v2/guide/syntax.html

一、使用示例：

1、在html页面中引入 vue.min.js

(1) 可以到官网下载该js并用 <script> 标签引入

(2) 直接用cdn的方式引入，cdn的地址为 https://cdn.staticfile.org/vue/2.2.2/vue.min.js】

2、第一个demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>first Demo</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<!-- 只能在该绑定的id中使用vue定义的属性和函数，通过{{ }} 输出对象属性和函数返回值 -->
<div id="vueTest">
    <h1>{{testA}}</h1>
    <h1>{{testB}}</h1>
    <h1>{{testC()}}</h1>
</div>
<script type="text/javascript">
        var myVue = new Vue({     //通过new实例化Vue来实现语法定义
            el: '#vueTest',    //el将该vue绑定到对应dom元素，这里对应html中的id
            data: {            //定义属性，
                testA: "hehe1",
                testB: "hehe2"
            },
            methods: {           //定义函数，可通过 return 返回函数值。
    	    testC: function() {
                    return  this.testA + "测试";
                }
            }
        })
    </script>
</body>
</html>

浏览器显示：

岁的斯蒂芬

二、语法分析：

1、vue对象分析：

    <script type="text/javascript">
        var data = { testA: "hehe1"}
        var myVue = new Vue({
            el: '#vueTest',
            data: data
        })
    </script>

这时 data.testA 和 myVue.testA 是同一个对象，其中一个改变，另一个也会跟着改变
前缀 $的使用：myVue.$data === data 、 myVue.$el === document.getElementById('vueTest')

2、模板语法：

1) {{ }} : 文本插值,数据绑定
例子：

 <p>{{ message }}</p>

如果 message 为 'test1' ，则html内容为 <p>test1</p>
也可写表达式： {{5+5}} 、 {{ ok ? 'YES' : 'NO' }} 、{{ message.split('').reverse().join('') }}
2)v-html : 输出 html 代码
例子：

<div v-html="message"></div>

如 message 为 '<a>test1<a>' ，则html内容为 <p><a>test1<a></p> , 会解析<a>标签
3)v-bind : 属性绑定
例子：

 <div v-bind:id="'test-' + id">hehe</div>    //id为 test-xxx
 <a v-bind:href="url">链接</a>
 <div v-bind:class="{'testA': testB}"> </div>    //testA为true才有class=testB

示例：勾选框时div有 class=testB ，去掉勾选框则没该class

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="testA" id="r1">
  <div v-bind:class="{'testA': testB}"></div>
</div>
<script>
    new Vue({
        el: '#app',
        data:{
             testA: false
        }
    });
</script>

4)v-if : 根据表达是true或false决定是否插入元素
例子： test 为true时才显示该元素

 <p v-if="test">hehe</p>

5)v-on : 用于监听 DOM 事件
例子：点击事件

<a v-on:click="doClickThing">

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

6)v-model : 用于 input 输入框中实现双向数据绑定,在 input、select、text、checkbox、radio 等表单控件元素使用。
例子：
所以input值改变则 vue 的message属性也改变，页面上引用到该属性的地方也会发生改变。


<div id="myVue">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#myVue',
  data: {
    message: 'myVues'
  }
})
</script>

当input框中的值改变则 vue 的message属性也改变，页面上引用到该属性(这里的p元素)的地方也会发生改变。

3、缩写：

(1) v-bind

<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

(2) v-on

<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

4、过滤器

vue可以通过管道 ( | ) 的方式进行过滤，格式化信息
语法如下：

<p>{{ message | formatMsg }}</p>
<div v-bind:id="id | formatId"></div>

formatMsg 、 formatId 为过滤器的表达式，其将接受过滤的值作为第一个参数。
实例：将输入的字符串第一个字母转为大写

<div id="myVue">
   {{ message | changeMsg }}
</div>   
<script>
new Vue({
  el: '#myVue',
  data: {
    message: 'test'
  },
  filters: {
    changeMsg : function (value) {    //value对应message的值
      if (!value) return ''
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

注意：过滤器可串联、可接受参数

<p>{{ message  | filterB | filterA('arg1', arg2) }}</p>

message 是第一个参数，字符串 'arg1' 作为第二个参数， arg2 表达式的值作为第三个参数。

5、添加属性

给 vue 对象的 data 中添加新属性不能直接添加，要使用Vue.set方法，如

<script>
    var myVue = new Vue({  
        el: '#vueTest',  
        data: {          
            testA: {}
        },
        methods: {           
        testC: function() {
                if(!this.testA.type){
                    Vue.set(this.testA,'type',2)
                }
            }
        }
    })
</script>

no_cloud

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js 学习

vue实现响应的数据绑定和组合的视图组件参考资料：Webpack 入门教程：http://www.runoob.com/w3cnote/webpack-tutorial.html官方文档：http://vuejs.org/v2/guide/syntax.html中文文档：https://cn.vuejs.org/v2/guide/syntax.html一、使用示例：1、在html...
复制链接

扫一扫