3.vue语法

在一个使用vue框架的页面应用程序中,至少要创建一个Vue实例,语法为 new Vue(),vue实例充当了MVVM模式中的ViewModel。创建vue实例时,需要传入一个选项对象,该对象可以包含数据、方法、组件生命周期钩子等。

1.第一个实例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--引入Vue的包(可以官方下载)-->
    <script src="../JS/vue.js"></script>
    <title>第一个vue程序</title>
</head>
<body>
<!-- 将来new出来的vue实例会控制这个元素中的所有内容   这也是MVVM中的V-->
<div id="app">{
  { message }}</div>
<script>
    //创建一个Vue的实例
    // 当我们导入包之后,启动浏览器,然后在浏览器的内存中,就多了一个 Vue 构造函数
    //  注意:我们 new 出来的这个 vm 对象,就是我们 MVVM中的 VM调度者
var  vm  = new Vue({
        el: '#app', // el表示,当前我们 new 的这个 Vue 实例,
        //要控制页面上的哪个区域(也就是数据要绑定页面上的哪个值)(也可以叫做挂载)
        // 这里的 data 就是 MVVM中的 M,专门用来保存 每个页面的数据的
        data: { // data 属性中,存放的是 el 中要用到的数据
        // 通过 Vue 提供的指令,很方便的就能把数据渲染到页面上,
            message: 'Hello vue!'
            //程序员不再手动操作DOM元素了
            //【前端的Vue之类的框架,不提倡我们去手动操作DOM元素了】
        }
    });
</script>
</body>
</html>

//另一种挂载方式:
var vm = new Vue({....}).$mount("#app");


2.插值:
{
  {message}} ->双花括号(也被叫做胡子语法) 用来表示文本插值
1.mustache 标签会替换为vue实例中数据对象上message属性的值。只要绑定的数据对象上
message属性发生了改变,插值处的内容就会被更新
2.mustache语法不能作用于HTML元素的属性上,要解决HTML元素属性值的绑定问题,
需要使用v-bind指令
3.mustache语法不能直接输出HTML元素,会将这些HTML元素当成文本输出出去,所以如果我
们真的想要输出HTML标签就需要使用V-html指令了
4.除了支持简单的绑定属性值外,对于所有的数据绑定,vue.js还提供了完全的
javascript表达式,所以我们还可以在mustache语法中使用表达式,如下:
{
  {a+b}},{
  {isLogin?username:'not login'}},
{
  {message.split('').reverse().join('')}},等。。。
5.插值表达式如果使用if()等语句或者是声明变量等,则不会生效,
会被当成字符串输出出去,如:{
  {var a =1}},{
  {if(ok){return message}}}


3.指令:
1.指令是带有v-前缀的特殊属性,其值限定为单个表达式。指令的作用是,
当表达式的值发生改变,将这个变化反映到DOM上。
2.在DOM中使用模板时(直接在一个HTML文件里编写模板),
还需要避免使用大写字符来命名动态参数,这是因为浏览器会把元素的属性名全部转换为
小写字符
3.在vue.js 2.6.0版本开始,指令的参数可以是动态参数,语法为指令:[js表达式],如下:
    <a v-bind:[attribute]="url">新浪网</a> 这里的attribute
    会被当做一个JavaScript的表达式进行动态求值,求得的值将作为最终的参数来使用
    假设vue实例中有一个数据对象属性为attribute,其值为href,那么这个绑定将等价于
    v-bind:href。如果attribute的值计算为null,那么这个绑定值将会被移除,
    最后的渲染效果如下:
            <a>新浪网</a>


4.指令详解:
指令是带有v-前缀的特殊属性,其值限定为单个表达式。指令的作用是,当表达式的值发生改变时,将其产生的连带影响应用到DOM上
4.1.内置指令:

v-show:
v-show指令根据表达式的值的真假,来显示或者隐藏HTML元素。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-show</title>
</head>
<body>
<!--使用v-show时,我们可以看到元素本身是要被渲染出来的,
但是显示与否都是通过css样式属性display来控制的
,如果表达式的值计算为false,则样式会被设置为"display:none;",
如果计算出是true则不会。
-->
<div id="app">
    <h1 v-show="yes">yes!</h1>
    <h1 v-show="no">no!</h1>
    <!-- v-show中还可以使用js表达式来判断 -->
    <h1 v-show="age>25">age: {
  {age}}</h1>
</div>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            yes: true,
            no: false,
            age: 28
        }
    });
</script>
</body>
</html>



v-if / v-else-if / v-else:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>v-if、v-else-if、v-else</title>
</head>
<body>
<!--使用v-if、v-else-if、v-else这三个指令用于实现条件判断
v-if:和v-show效果相同,但是当我们打开控制台时,可以看到当表达式结果为false的时候,
我们可以看到结果为false的元素并没有生成
v-if和v-show的区别:
v-show是会渲染表达式结果为false的元素,只不过会将该元素的css样式设置为"display:none;",
而v-if则不会生成相应元素
使用区别:v-if有更高的切换开销,而v-show有更高的初始渲染开销,因此,
如果需要非常频繁的切换元素,则使用v-show较好,如果在
运行时条件很少改变,则使用v-if较好

v-else-if、v-else:这两者都是和v-if一起使用的,可以实现互斥的条件判断

-->
<div id="app">
    <h1 v-if="yes">yes!</h1>
    <h1 v-if="no">no!</h1>
    <!-- v-if中也可以使用js表达式来判断 -->
    <h1  v-if="age>200">年龄是:{
  {age}}</h1>
    <h1 v-else="age>100">age: {
  {age}}</h1>
    <h1 v-else-if="age>50">年龄为:{
  {age}}</h1>

</div>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            yes: true,
            no: false,
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值