室友打了一把端游，我入门了Vue

最新推荐文章于 2024-06-18 20:10:11 发布

geejkse_seff

最新推荐文章于 2024-06-18 20:10:11 发布

阅读量163

点赞数

分类专栏：前端 html 文章标签： mysql java 数据库

本文链接：https://blog.csdn.net/geejkse_seff/article/details/123220686

版权

快速入门Vue

?? 多种选择器
- ??class选择器
- ??标签选择器
?? data数据对象
?? Vue 指令
?? Vue结合网络数据开发应用
- ??axios结合Vue

使用工具 vs code
建议使用插件 Live Server Preview（方便快速查看代码效果）

打开官网，我们可以看到如下两种环境
在这里插入图片描述
?? 因为我们是初学者，我们可以直接最好使用开发环境，这会给我们更好的代码提示，让我们更快入门。

根据官网的介绍，我们先入进行入门练习

先导入开发环境

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>


<!--先在body里面创建一个div-->
<div id="app">
  {
  { message }}
</div>

在js里面写如下的代码

注意：Vue的首字母大写

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

全局来看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    {
  {message}}
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app" >
        {
  {message}}
    </div>

<script>
    var app=new Vue({
        el:"body",
        data:{
            message:"Hello Vue!"
        }
    })
  
</script>
    
</body>
</html>

运行结果

Hello Vue!

入门总结：

导入开发版本的Vue.js
创建Vue实列对象，设置el属性和data属性
使用简洁的模板语法把数据渲染到页面

?? 多种选择器

??class选择器

<!--先在body里面创建一个div-->
<div id="app" class="app">
  {
  { message }}
</div>


var app = new Vue({
  el: '.app',
  data: {
    message: 'Hello Vue!'
  }
})

运行结果

Hello Vue!

??标签选择器

只用更改这里

var app = new Vue({
  el: 'div',
  data: {
    message: 'Hello Vue!'
  }
})

运行结果

Hello Vue!

?? data数据对象

<body>
    {
  {message}}
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app" class="app">
        {
  {message}}
        <span>{
  {school}}</span>
        <h3>{
  {school.name}}</h3>
        <h3>{
  {school.mobile}}</h3>
        <h3>{
  {like}}</h3>
        <h2>{
  {like[0]}}</h2>
          <h2>{
  {like[1]}}</h2>
    </div>
 
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"你好，xxx",
            school:{
                name:"xxx学院",
                mobile:"13143xxxxxx"
            },
                like:["csgo","LOL"]
            },
        
    })
</script>
    
</body>

结果演示

{
  {message}}
你好，xxx { "name": "xxx学院", "mobile": "13143xxxxxx" }
xxx学院
13143xxxxxx
[ "csgo", "LOL" ]
csgo
LOL

data：数据对象总结

Vue中用到的数据定义在data中
data可以写复杂类型的数据
渲染复杂类型数据时，遵守js语法即可

?? Vue 指令

设置标签的文本值（textContent）

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app" >
        <h2 v-text="message">
        入门Vue如此简单    
        </h2>
        <h2>入门Vue如此简单{
  {message}}</h2>

    </div>
 
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"生命不息，学习不止",  
            },
        
    })
</script>
    
</body>

结果演示

生命不息，学习不止
入门Vue如此简单 生命不息，学习不止

我们可以看到当我们直接使用v-text时，我们的内容会全部被替换，于是我们使用插入法入门{ {message}}来防止全部替换

当然我们也可以进行字符串拼接

```html
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app" >
        <h2 v-text="message+'!'">
          
        </h2>
        <h2>{
  {info+' 加油'}}</h2>

    </div>
 
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"生命不息，学习不止",  
            info:"后端路漫漫,什么都要学"
            },
        
    })
</script>
    
</body>

结果演示

生命不息，学习不止!
 后端路漫漫,什么都要学 加油

设置标签的innerHtml（v-html）

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app" >
        <p v-html="content"></p>
        <p v-text="content"></p>

    </div>
 
<script>
    var app=new Vue({
        el:"#app",
        data:{
            content:""

            },
        
    })
</script>
    
</body>

结果演示

可以看出来没有什么区别，然后我们做一下修改

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app" >
        <p v-html="content"></p>
        <p v-text="content"></p>

    </div>
 
<script>
    var app=new Vue({
        el:"#app",
        data:{
           // content:"",
            content:"<a href='http://www.baidu.com'></a>"

            },
        
    })
</script>
    
</body>

结果演示

在这里插入图片描述
这样我们可以看到这两个的区别了,上面的可以识别标签，我们点击第一个就可以跳转了

为元素绑定事件（v-on）

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app" >
<input type="button" value="v-on指令" v-on:click="doIt"></input>

    </div> 
<script>
    var app=new Vue({
        el:"#app",
        methods:{
            doIt:function(){
                alert("好好学习，天天向上");
            }
        }
    })
</script>
    
</body>

结果演示

在这里插入图片描述
点击事件，当我们点击这个button按钮后就会出现弹窗显示

为了减少代码量还有一种简写的方式

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app" >
<input type="button" value="v-on指令" v-on:click="doIt"></input>
<input ty

最低0.47元/天解锁文章

geejkse_seff

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
室友打了一把端游，我入门了Vue

快速入门Vue?? 多种选择器??class选择器??标签选择器?? data数据对象?? Vue 指令?设置标签的文本值（textContent）?设置标签的innerHtml（v-html）?为元素绑定事件（v-on）?根据表达式的真假，切换元素的显示和隐藏（v-show）?根据表达式的真假，切换元素的显示和隐藏(操纵dom元素) （v-if）?设置元素的属性（v-bind）?根据数据生成列表结构（v-for）? 传递自定义参数，事件修饰符 (v-on补充)?获
复制链接

扫一扫