Vue基本知识点学习

<>Vue基础知识点学习 day01

1.基本认识:
Vue是一个构建数据驱动的 web 界面的渐进式框架,所谓’‘渐进式’‘其实就是你掌握了Vue的多少用法就使用多少,不像一些框架必须掌握所有才能进行运用。
2.Vue特性

*
轻量
Vue.js库的体积非常小的，并且不依赖其他基础库。

*
数据绑定
对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。

*
指令
内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。

*
插件化
Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。

*
组件化
组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用
3.Vue资源安装
很简单，到官网上下载就可以，任意版本都行，然后直接将js拷贝到项目中就完事
4.Vue的简单使用认识

* 步骤一(引入js文件):

这里需要注意两个小问题: 1.<script></script>必须是双标签,单标签的<script>是没有效果的 2.相对路径和绝对路径的注意
*
步骤二(准备挂载的元素):

这里我们创建一个<div>标签,给一个id
*
步揍三(准备数据):
<script> var app = new Vue({ el:"#one", //el："#xx"
就是与你给定id为xx的标签进行挂载(也就是建立联系) 当然el:".xx" 还能挂载class和el:"div"标签 (推荐还是通过id来进行操作
data:{ //vue的数据绑定在data属性上，data本身也是一个对象 massage:"hello vue", //然后在你所挂钩的标签中通过 {
{massage}} 的书写方式就能获取其中的值 arr:[1,2,3,4], //数组也一样 {{arr[0]}} employee:{ //对象 {
{employee,name}} name:"你好", age:12 } }, methods:{
//Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体 say(){ alert("你好") } }
}); app.say(); //js调用方式 在挂载标签中 {{say}} Vue的掉用方法,里面可以不写() </script>
<>Vue架构认识

MV VM模式：(medol view viewmodel)
具体解释:

<>VueJS表达式

VueJS表达式写在双大括号内：{{ expression }}
VueJS表达式把数据绑定到 HTML
VueJS将在表达式书写的位置"输出"数据
VueJS表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量
1 基本的算术运算 /* * 运算 字符串 有字符串时除了‘+’加是字符串的拼接 其他会正常运算 **/ num: 5 + 10, nums: "5" +
10, chengfa: 5 * 9, chufa: 10 / 2, chengfas: "50" * 10, 2 <div id="app">
<!--三目运算 --> {{ show1?"真":"假"}} //真 </div> <script type="text/javascript"
src="js/vue/vue.min.js"></script> <script type="text/javascript"> var app = new
Vue({ el : "#app", data : { show1 : true //这里为true } }); </script> 3 1.
直接使用字符串字面值作为字符串对象 2. 使用data中的字符串对象 <div id="app"> {{"这是字面值"}}<br/> {
{"这是字面值".length}}<br/> {{message.length}}<br/> //获取字符串长度 {
{message.substring(1,5)}}<br/> //截取1-5个字符 {
{message.substring(2,6).toUpperCase()}}<br/> </div> <script
type="text/javascript" src="js/vue/vue.min.js"></script> <script
type="text/javascript"> var app = new Vue({ el: "#app", data: { message:
"这是data中的数据" } }); </script> 4 对象操作 在表达式中可以使用data中定义的对象的各种用法.像使用js对象中的方法和属性一样
<div id="app"> {{user}}<br/> {{user.toString()}}<br/> {{user.name}}<br/> {
{user.age}}<br/> {{user.getAge()}}<br/> </div> <script type="text/javascript"
src=“js/vue/vue.min.js”></script> <script type="text/javascript"> var user = {
name: "张三", age: 29, getAge: function () { return this.age //前台返回user的年龄 },
toString:function(){ return "姓名:"+this.name+",年龄:"+this.age; //这里的this就是user }
}; var app = new Vue({ el: "#app", data: { user: user // } }); </script> 5 数组操作
在表达式中可以使用JavaScript数组中的任何语法来操作数组. <div id="app"> {{hobbys}}<br/> {
{hobbys[0]}}<br/> {{hobbys.length}}<br/> </div> <script type="text/javascript"
src=“js/vue/vue.min.js”></script> <script type="text/javascript"> var app = new
Vue({ el: "#app", data: { hobbys:["打游戏","踢足球",'泡MM',"泡GG"] } }); </script>
<>Vue指令

可以去查看官方文档有详细的介绍和使用方法，作用
## 常见的指令 v-text=“表达式” 设置标签中的文本 v-html=“表达式” 设置标签中的html v-if=“表达式” 判断条件
v-for=“表达式” 循环 v-model=“表达式” 数据双向绑定 v-on=“表达式” 注册事件 5:vue指令: 指令:v-*;
v-text:操作的文本; v-html:操作的html; v-for: v-for=” currentObject in Objects” 如果是对象:
每次遍历得到的是对象的属性值: v-for=” (v,k,i) in Objects” 如果是数组: 每次遍历得到的是数组中单独的一个值: v-for=”
(array,i) in arrays” v-bind:给html标签绑定属性 单一属性绑定:v-bind:属性名=”表达式”
绑定一个对象:v-bind=”表达式” v-model:数据模型的绑定:双向绑定 v-model=”表达式”; 作用于: input select
textarea;如果是复选框:应该data使用数组; v-show:是否显示,判断表达式的值,
true:显示;false:隐藏(只是增加一个样式:display:none,html元素没有删除的哦) v-if: 1:
v-if=”表达式”:true就做事情,false:压根就把这个元素给删除了; 2:v-if=”表达式” v-else 3:v-if=”表达式”
v-else-if=”表达式” v-else-if=”表达式” v-else v-on: 给一个html标签绑定事件: v-on:事件名=”表达式”;
注意:this:当前对象
具体代码:
v-text=“表达式” 设置标签中的文本 <div id="xxx" v-Text="text"> {{text}} </div>
<!--v-text不能解析html标签--> <script> new Vue({ el:"#xxx", data:{ text:"<h1>你是谁<h1>"
} }) </script> <!--v-html能够解析html的标签功能--> <div id="aaa" v-html="title"> {
{title}}， </div> <script> new Vue({ el: "#aaa", data: { title: "<h1>Helle
world<h1>", } }) </script> <div id="myDiv" > <div v-if="num<20">
<h1>数目小于20</h1> </div> <div v-elas-if="num>=40"> <h1>数目大于20小与40</h1> </div>
<div v-elas> <h1>数目大于40</h1> </div> </div> <script> new Vue({ el:"#myDiv",
data:{ num:20 } }) </script> <!--添加挂钩属性--> v-model只作用于以下表单: [input select(下拉)
textarea(文本域)] <div id="Mydiv"> <input type="text" v-model="title"> {{title}}
<textarea v-model="text"></textarea> {{text}} <select> <option v-for="a in arr"
:arr="a.id"> {{a.name}} </option> </select> </div> <script> new Vue({
el:"#Mydiv", data:{ title:"123456", text:"ssssssssssss", arr:[ {id:1,name:"壹"},
{id:2,name:"贰"}, {id:3,name:"叁"}, ] } }) </script>
<!--show为false时,只是页面隐藏信息,但是依然有值--> <div id="MyDiv" v-show="false"> {{title}}
</div> <script> new Vue({ el:"#MyDiv", data:{ title:"显示和隐式" } }) </script>
<body> <button id="Mybtn"value="按钮" @click="say()" v-on:click="say"> 按钮
//这里有两种注册事件的写法 一： v-on:click="say" 二:@click="say()" 方法的()括号可写可不写,需要传值就写上
</button> <script> new Vue({ el:"#Mybtn", methods:{ say(){ alert("弹出") } } })
</script> </body>
组件:自定义编标
<script> /** * 注意点 * 1.一定要先定义组件,再进行vue的挂载 * 2.模板中必需有一个根标签 * 3.取名的问题 *
如果使用驼峰命名法 myTag -> <my-tag> * / //自定义一个全局组件(把相同的代码搞成一个组件，以后方法调用) /** *
全局组件:被Vue挂载到的地方都可以使用 * 定义了一个组件,名字叫做:mytag * 第一个参数：组件名 第二个:模块 */
Vue.component("mytag",{ //组合的模板 template:"<h1>假如有一千句html</h1>" }) new Vue({
el:"#app" }) new Vue({ el:"#app2" }) </script>
局部组件
<div id="app"> <mytag></mytag> </div> <div id="app2"> <mytag></mytag> </div>
<script> new Vue({ el:"#app", //组件(多个) components:{ mytag:{
template:"<h2>我是局部组件</h2>" } } }) </script>

• « 上一篇：为什么C++是最难学的编程语言？
• » 下一篇：Java面试题--shiro