vue基本使用

一、 Vue导入

<!-- 本地导入 -->
<script src="node_modules/vue/dist/vue.js"></script>
<div id="app">
    <h1>用户名:<input type="text" v-model="name"/></h1> <br/>
    <h1>您输入的用户名是: {{name}}</h1>
</div>

<script type="text/javascript">
    //创建一个Vue对象
    var app = new Vue({
        //指定,该对象代表<div id="app">,也就是说,这个div中的所有内容,都被当前的app对象管理
        el: "#app",
        //定义vue中的数据
        data: {
            name: ""
        }
    });
</script>

2. 插值表达式
**概述：**插值表达式用户把vue中所定义的数据,显示在页面上. 插值表达式允许用户输入"JS代码片段"

语法：{{ 变量名/对象.属性名 }}

Vue是一个类似于Jquery的一个JS框架，所以，如果想使用Vue，则在当前页面导入Vue.js文件即可。

二、内置指令

v-model：数据双向绑定数据

注意：

1. 双向绑定, 只能绑定“文本框,单选按钮,复选框,文本域,下拉列表”等
2. 文本框/单选按钮/textarea, 绑定的数据是字符串类型
3. 单个复选框radio, 绑定的是boolean类型,要给标签配置value值
4. 多个复选框checkbox, 绑定的是数组[ ] ，非数组收集的是checked是否勾选，是布尔值
5. select单选对应字符串，多选对应也是数组。

   arr数组7个api：push添加,shift删第一个,unshift往前面加一个，splice替换，sort排序，reverse反转,pop删除最后一个。

6. form表单数据提交

   /* json格式提交： */   
   // let formData = JSON.stringify(this.formMess);
    
         /* formData格式提交： */
         let formData = new FormData();
         for(var key in this.formMess){
           formData.append(key,this.formMess[key]);
         }

v-model的三种修饰符:lazy,numer,trim

lazy 修饰符: 使模型绑定的数据只有在失去焦点或者是按下回车时才会更新

<input type="text" id="inp" v-model.lazy="message">

number 修饰符: 使输入框中输入的内容自动转换为数字类型或有效数字

<input type="number" name="" id="age" v-model.number="age">

type=number输入类型只为数字类型，v-model.number自动转换数字类型格式age:18存到数据库

trim修饰符：过滤掉内容左右两边的的空格

<input type="text" name="" id="str" v-model.trim="str">

v-on：事件绑定，可简写为@ ，如: @change,@click, @submit等 。

v-for：循环遍历数组/对象/字符串。    

v-if：条件渲染，判断语法，动态控制节点是否存在。

v-show:条件渲染，相当于display:none/block，动态控制节点是否展示。

v-bind：单向绑定解析表达式，可简写为  ：

v-text：把数据当作纯文本解析。渲染所在节点的文本内容。

与插值语法的区别：v-text会替换掉节点的内容，{{ }}则不会。

v-html：向指定节点中渲染包含html结构的内容。会替换掉节点中所有的内容，{{ }}则不会。

不要在用户提交的内容上使用Html,容易导致xss攻击。

v-cloak: Vue实例创建完毕并接管容器后，会删掉v-cloak属性。配合css的display:none使用解决网速慢时页面展示{{ }}的问题。

v-once:所在节点在初次动态渲染后，就视为静态内容了。只渲染第一次。

v-pre: vue不解析内容，跳过其所在节点的编译过程。

希望对大家有帮助，有用的大家可以点个赞~~~