Vue基本使用

Vue.js是一款流行的开源JavaScript前端框架，旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。

基本语法

1.vue的使用要从创建Vue对象开始

let vm = new Vue();

2.创建vue对象

创建vue对象的时候，需要传递参数，是json对象，json对象对象必须至少有两个属性成员

vm = new Vue({
el:"#app",
data: {
　　methods:{},
　　watch:{},
　　filters:{},

el:设置vue可以操作的html内容范围，值就是css的id选择器。

data: 保存vue.js中要显示到html页面的数据。

methods:定义函数。

watch:监听属性

filters:定义过滤器。

3.设置控制范围

vue.js要控制器的内容外围，必须先通过id来设置。

>

4.简单示例

    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js--> 
<p id="app">
   {{message}} 
</p>

Vue.js的M-V-VM思想

示例：

    <meta charset="UTF-8">
    <title>Title</title> 
<p id="app">
    <!-- 在双标签中显示数据要通过 {{ }} 来实现-->
    {{name}}
    </p><p>{{age}}</p>
    <!-- 在表单输入框中显示数据要使用模板语法 v-model 来完成-->
    <input type="text" v-model="name">
<p></p>

要是在输入框中输入，则html中的那么对应的值也会跟着改变

在浏览器中可以在 console.log通过 vm对象可以直接访问el和data属性,甚至可以访问data里面的数据

console.log(vm.$el) # #box vm对象可以控制的范围

console.log(vm.name); 显示name的值

也可以通过console直接修改data中的值，页面也会跟着改变

总结

1. 如果要输出data里面的数据作为普通标签的内容，需要使用{{ }} 用法： vue对象的data属性： data:{

name:"小明",}

标签元素： {{ name }}

2. 如果要输出data里面的数据作为表单元素的值，需要使用vue.js提供的元素属性v-model 用法： vue对象的data属性：

data:{ name:"小明", }

表单元素：

显示数据

显示数据的一般规则：

在双标签中显示数据要通过{{ }}来完成数据显示

在表单输入框中显示数据要使用v-model来完成数据显示

输出html代码,要使用v-html来输出.v-html必须在html标签里面作为属性写出来.

示例：

    <meta charset="UTF-8">
    <title></title> 
<p id="app">
    {{title}}
    {{ url1 }}
    用{{}}显示出来的html代码则会按原始字符串输出 :
    {{ img }} <br>
    以下是图片 <br>
    <span v-html="img"></span>   <br ><!--="" 在此用data中的img来显标签属性值，即就是把img原样放入span中="" --="">
</p>

在输出内容到普通标签的使用{{ }}还支持js代码。

{{str1.split("").reverse().join("")}}
    <!--支持js的运算符-->
    {{num1+3}}
    <!--  js还有一种运算符,三元运算符,类似于python里面的三元表达式
        三元运算符的语法:
         判断条件 ? 条件为true : 条件为false的结果
        python 三元表达式[三目运算符]的语法:
        a if 条件 else b
     -->
    num1和num2之间进行比较,最大值:{{ num2>num1?num2:num1 }}

常用指令

指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。

在vue中，提供了很多指令，常用的有：v-if、v-model、v-for等等。

指令会在vm对象的data属性的数据发生变化时，会同时改变元素中的其控制的内容或属性。

因为vue的历史版本原因，所以有一部分指令都有两种写法：

vue1.x写法              vue2.x的写法
v-html         ---->   {{  }}   # vue2.x 也支持v-html
v-bind:属性名   ---->   :属性
v-on:事件名     ---->   @事件名

动力节点在线课程涵盖零基础入门，高级进阶，在职提升三大主力内容，覆盖Java从入门到就业提升的全体系学习内容。全部Java视频教程免费观看，相关学习资料免费下载!对于火爆技术，每周一定时更新!如果想了解更多相关技术，可以到动力节点在线免费观看Vue入门视频教程学习哦!