文章目录

      • vue基本逻辑
        • 什么是vue
        • vue使用：
        • vue插值
        • Vue的计算属性
          • Vue的计算属性的setter
        • Vue的方法

vue基本逻辑

什么是vue

某种意义上来讲, Vue.js不是一个框架-----它只聚焦视图层，是一个构建数据驱动的web界面的库(当然, 按照目前的发展来看,vue有完善的生态圈, 早可以成为框架)。Vue.js通过简单的API提供高效的数据绑定和灵活的组件系统. Vue内置的额外方法库较少, 比如Router, ajax,表单验证等等一些额外的功能得由我们自行引入。

其特性:
轻量化: 生产环境的Vue可以做到才30多KB, 这个代码量非常之小, 是jQuery生产版本体量的几分之一
数据绑定: 非常方便的讲js控制的数据与页面内容进行绑定, 省去了我们大量的同步设置环节
指令: 我们可以通过内置指令v-* 和一些自定义的指令来实现我们要实现的业务功能
方便拓展: 虽说我们vue内置的方法不多，但是可以很方便的去引入一些其他的组件库

vue使用：

vue引入：

​ 直接引入

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

<div id="app">
    {{name}} <br>
    <input type="text" v-model="name"> <br>
    {{user.age}} <br>
</div>
<script>
    const vm = new Vue({
        el: '#app',//绑定元素
        data: {//绑定对象的数据
            name: 'dream',
            user: {
                username: 'kevin',
                age: 20
            }
        },
</script>

vue插值

文本插值是最基本的形式，使用双大括号{{}}（类似于Mustache，所以本文中称作Mustache标签）

例子中的标签{{msg}}将会被相应的数据对象msg属性的值替换掉，当msg的值改变时，文本中的值也会联动地发生变化。

Mustache标签也接受表达式形式的值，表达式可由JavaScript表达式构成。表达式是各种数值、变量、运算符的综合体。简单的表达式可以是常量或者变量名称。表达式的值是其运算结果：
js表达式

{{  msg/100 }}  //在原始值上除以100
{{true?1:0}}//值为真,则渲染出1,否则渲染出0
{{ msg.split(“ , ”) }} //把值对应的字符串进行处理
无效示例
{{ var a = 1 }}  // 这是一条语句, 不是表达式
{{ if (ok) { return message } }} //控制流程的代码也是没有用的

Vue的计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

const vm = new Vue({
        // 绑定 id=app的元素 可以在此元素里面使用vue提供的特性
        el: '#app',
        // data选项里面 就是 模板所需要的数据 而数据来源后端
        data: {
            msg: 'hello vue',
            price: 99,
            gender: 0,
            password: 123456,
            category: [],
        },
        // 计算属性
        computed: {
            handleGender(){
                return this.gender ? '小哥哥' : '小姐姐'
            },
            handlePrice(){
                return this.price + '￥'
            },
            handlePassword: {
                set(v){
                    this.password = v +1
                },
                get(){
                  return this.password
                  // return md5(this.password)
                }
            }
        },
Vue的计算属性的setter

Vue的方法

  // 自定义方法
        methods: {
            async handleGetColumnList(){
                const response = await fetch('https://h5sm/flutter/api/getColumnList')
                const result = await response.json()
                // console.log(result.data)
                this.category = result.data
            },
            handlePriceData(name,value){
                window.localStorage.setItem(name,value)
            }
        },
        created(){
            this.handleGetColumnList()
        },
        // 对数据过滤
        filters: {
            handleFilterPassword(v){
                return md5(v)
            }
        }

更多推荐

vue基本逻辑