关于vue.js的特点与基本语法

1.vue.js源代码最外层使用了匿名函数(function(){}) ()1. 特点安全性高减少了函数命名冲突第二个括号才是函数的真正运行，里面可以传入实际参数第一个括号确定了匿名函数的作用范围，语法不会报错，里面放一个没有名字的函数，函数可以接收形式参数2. 底层代码封装* 匿名函数作用确定vue.js这个库的使用方法直接将Vue当做全局的一个方法...

qq_39142654

315人浏览 · 2019-04-17 20:39:10

qq_39142654 · 2019-04-17 20:39:10 发布

1.vue.js源代码

最外层使用了匿名函数

(function(){}) ()

1. 特点

安全性高
减少了函数命名冲突
第二个括号才是函数的真正运行，里面可以传入实际参数
第一个括号确定了匿名函数的作用范围，语法不会报错，里面放一个没有名字的函数，函数可以接收形式参数

2. 底层代码封装

* 匿名函数作用

确定vue.js这个库的使用方法

直接将Vue当做全局的一个方法使用，因为将Vue挂在了 window
使用了amd来定义vue.js这个库为一个模块，这样我们才能模块化引入

封装库如何定义

(
function(){
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.Vue = factory());
}
)(this,function(){
'use strict'
function Vue(options){
if(!(this instanceof Vue)){
console.log('this 有问题， Vue是一个构造函数， 应该使用new 来实例化')
}
this._init(options)
}
Vue.prototype._init = function(){
console.log('vue')
}
return Vue
})

vue.js的起步

1.下载
$ npm install vue -D
2.引入

<script src=""></script>

3.书写格式
在body中书写

<div id="app">
 {{msg}}
</div>

在body下书写

<script>
new Vue({
el: '#app',               //使用el挂载
data: {                    //数据，以对象方式书写数据
    msg:"hello vue!",   //键值对，用“ , ”分隔
}
})
</script>

模板语法

在vue.js的模板语法中，alert console.log 不能使用
if的使用方法改为使用三元表达式
例：

{{false?1:0}}

方法要写在methods中，不要直接写在模板语法中
例：

        <script>
        new Vue({
        methods: {
        sum() {
        return 1 + 1;
                 }
        }
        })
</script>

模板语法中支持使用匿名函数，可以直接书写

例：

{ (function(){return 2+2})() }}

列表渲染

v-for指令
语法：v-for = " xxx in data "
{{ xxx }}
例：


<body>
    <div id="app">
        <ul>
            <li v-for="item in arr">
                <!--item可以随意更改，自行定义 -->
                {{ item }}
            </li>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            arr: ['a', 'b', 'c', 'd'],
        }
    })
</script>

如果需要索引 index
可使用：v-for = "(item,index) in data "
{{ item }} — {{ index }}


<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr">
                <!--item可以随意更改，自行定义 -->
                {{ item }}---{{ index }}
            </li>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            arr: ['a', 'b', 'c', 'd'],
        }
    })
</script>

循环对象：
v-for = “(index,item,key) in obj”



<body>
    <div id="app">
        <ul>
            <li v-for="(index,item,key) in obj">
                <!--item可以随意更改，自行定义 -->
                {{ item }}---{{ index }}--{{key}}
            </li>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            obj: {
                name: '李某人',
                age: 21,
                sex: 'man',
            },
        }
    })
</script>

列表渲染总结:

v-for 最多可以有三个参数
格式
v-for = “(index,item,key) in data”
名词解释：
index: 索引
item； data中的每一个
key；如果是对象，表示对象的key
v-for如果有循环嵌套，那么value可以写成一样的命名，但是我们建议大家写成不一样的命名，理由：比较语义化
v-for 可以循环数字或是一个字符

扩展：

v-for = ' item in data'
底层：
function v-for( arg ){
//做字符串处理
var data = 'data'
for( var i = 0 ; i < data.length; i++ ){
}
}

条件渲染
两种：

v-if

单路分支

<p v-if = " f ">
true
</p>

双路分支

<p v-if = " f ">
true
</p>
<p v-else>
false
</p>

多路分支

<p v-if = " text === 'A'"> A </p>
<p v-else-if = " text === 'B'"> B </p>
<p v-else> C </p>

v-show

<p v-show = " f ">
if条件
</p>

关于v-if vs v-show

v-if 操作的是DOM存在与否, v-show操作的DOM的display样式属性
性能

如果条件为假，v-show有较高的初始渲染开销
v-if 有更高的切换开销
项目中建议：
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

AtomGit 开源协作平台测评赛

瓜分20万奖金获得内推名额丰厚实物奖励易参与易上手

更多推荐

【Spring Boot 】Spring Boot + HikariCP 连接池使用示例

文章目录示例工具版本HikariCP 依赖HikariCP 配置1. connectionTimeout2. minimumIdle3. maximumPoolSize4. idleTimeout5. maxLifetime6. autoCommitSpring Boot Data + HikariCP + MySQL示例测试应用程序1. 使用 Maven 命令2. 使用 Eclipse3. 使用