vue笔记——本地应用

本地应用

DOM：获取元素，操纵它们

vue.js: v开头语法 --> vue指令

1.内容绑定，事件绑定

v-text

 <div id="app">
       <h2 v-text="message+'!'">四川</h2>
       <h2 v-text="info+'!'">四川</h2>
       <h2>{
  { message+"!" }}四川</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
    
            el:"#app",
            data:{
    
                message:"李云龙",
                info:"意大利炮"
            }
        })
    </script>

v-text替换全部，{ {}}替换部分

字符串拼接用+（逻辑运算）

v-html

当data内容为html内容可以解析出来，普通文本和v-text相同

 <div id="app">
       <p v-html="content"></p>
       <p v-text="content"></p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
    
            el:"#app",
            data:{
    
               content:"<a href='http://www.baidu.com'>李云龙</a>"
            }
        })
    </script>

v-on(为元素绑定事件)

<input type="button" value="事件绑定" v-on:事件名="方法">/<input type="button" value="事件绑定" @事件名="方法">

methods(与data，el平级)

事件引发弹出窗口

<div id="app">
       <input type="button" value="单击" v-on:click="doWr">
       <input type="button" value="移到" v-on:mouseenter="doWr">
       <input type="button" value="双击" v-on:dblclick="doWr">
       <input type="button" value="简写双击" @dblclick="doWr">
     </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
    
             el:"#app",
            methods:{
    
                doWr:function(){
    
                  alert("按错了！！！");
                }
            }
         })
     </script>

更复杂的方法（如修改页面元素显示），不用操作DOM元素

vue特点是页面由数据生成，数据改变，页面就会改变

点击改变文本

<div id="app">
       <h2 @click="changeWeapon">{
  { weapon }}</h2>